Grid
How Grid cells fill and align their content, with and without nested stacks.

package main
import (
"go.wdy.de/nago/application"
"go.wdy.de/nago/presentation/core"
. "go.wdy.de/nago/presentation/ui"
"go.wdy.de/nago/web/vuejs"
)
func main() {
application.Configure(func(cfg *application.Configurator) {
cfg.SetApplicationID("de.worldiety.tutorial")
cfg.Serve(vuejs.Dist())
cfg.RootView(".", func(wnd core.Window) core.View {
return VStack(
Text("A simple grid row, by default cells are spanned completely"),
Grid(
GridCell(Text("cell 1").BackgroundColor("#ff0000")),
GridCell(Text("cell 2").BackgroundColor("#ff0000")),
GridCell(Text("cell 3").BackgroundColor("#ff0000")),
).
Rows(1).
BackgroundColor("#00ff00").
Frame(Frame{}.Size(L320, L320)),
Text("A simple grid row using stacks for alignment"),
Grid(
GridCell(VStack(Text("cell 1").BackgroundColor("#ff0000")).Alignment(Leading)),
GridCell(VStack(Text("cell 2").BackgroundColor("#ff0000")).Alignment(Center)).BackgroundColor("#0000ff"),
GridCell(VStack(Text("cell 3").BackgroundColor("#ff0000")).Alignment(Trailing)),
).
Rows(1).
BackgroundColor("#00ff00").
Frame(Frame{}.Size(L320, L320)),
Text("Cell alignment rules"),
Grid(
GridCell(Text("Leading").BackgroundColor("#ff0000")).
Alignment(Leading),
GridCell(Text("Center").BackgroundColor("#ff0000")).
Alignment(Center),
GridCell(Text("Trailing").BackgroundColor("#ff0000")).
Alignment(Trailing),
GridCell(Text("Top").BackgroundColor("#ff0000")).
Alignment(Top),
GridCell(Text("Bottom").BackgroundColor("#ff0000")).
Alignment(Bottom),
GridCell(Text("TopLeading").BackgroundColor("#ff0000")).
Alignment(TopLeading),
GridCell(Text("TopTrailing").BackgroundColor("#ff0000")).
Alignment(TopTrailing),
GridCell(Text("BottomLeading").BackgroundColor("#ff0000")).
Alignment(BottomLeading),
GridCell(Text("BottomTrailing").BackgroundColor("#ff0000")).
Alignment(BottomTrailing),
).
Rows(1).
BackgroundColor("#00ff00").
Frame(Frame{}.Size("100%", L320)),
).
Frame(Frame{}.MatchScreen())
})
}).Run()
}
View on GitHub ↗
· run it with go run go.wdy.de/nago/example/cmd/tutorial-30-grid@latest