Grid

サンプル

参照情報

テンプレート

templates/components/grid.html

ゴールデン

testdata/golden/grid.golden.html

Go（Marionette）サンプル

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

package goexamples

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

func RegisterGridExample(app *mb.App) {
	app.Page("/grid", func(ctx *mb.Context) mf.Node {
		return mf.Grid(mf.GridProps{Columns: "3", Gap: "lg"},
			mf.Card(mf.CardProps{Title: "Users"}, mf.TextComponent(mf.TextProps{Text: "24"})),
			mf.Card(mf.CardProps{Title: "Teams"}, mf.TextComponent(mf.TextProps{Text: "6"})),
			mf.Card(mf.CardProps{Title: "Alerts"}, mf.TextComponent(mf.TextProps{Text: "1"})),
		)
	})
}