コンポーネント詳細

Layout stories

Layout usage demo with cards, grid, and split panels.

サンプル

参照情報

テンプレート
docs/site-astro/public/examples/layout.html
ゴールデン
N/A

Go(Marionette)サンプル

この実装例は Go の Marionette を使っています。ソース: docs/site-astro/public/examples/go/layout.go

package goexamples

import (
	mb "github.com/YoshihideShirai/marionette/backend"
	mf "github.com/YoshihideShirai/marionette/frontend"
)

func RegisterLayoutExample(app *mb.App) {
	app.Page("/layout", func(ctx *mb.Context) mf.Node {
		return mf.Container(mf.ContainerProps{MaxWidth: "md", Centered: true},
			mf.Grid(mf.GridProps{Columns: "2", Gap: "lg"},
				mf.Card(mf.CardProps{Title: "Main"}, mf.TextComponent(mf.TextProps{Text: "Primary content"})),
				mf.Card(mf.CardProps{Title: "Aside"}, mf.TextComponent(mf.TextProps{Text: "Supporting content"})),
			),
		)
	})
}