スタイルとレイアウト
要素または ui.Style() にスタイルメソッドをチェーンします。子は .Child(...) または .Children(...) で追加し、スタイルの再利用は .Style(shared) で行います。
return ui.View().Children(ui.Text("hello"), ui.Input().Value("xxx")).
FlexCol().PaddingLeft(20).RoundedLg().TextAlign("center")#スタイルメソッド
あとから書いた値が同じプロパティを上書きします。長さは論理ピクセルです。文字列ではパーセントも使えます。
func Card() *ui.Element {
return ui.View().Child(ui.Text("Hello").TextColor("#e2e8f0")).
Padding(20).BorderRadius(12).Bg("#111827")
}.FlexCol()、.P4()、.GridCols(3)、.RoundedLg() などのヘルパーは TypeScript のプリセットに対応します。
#スタイルのマージ
.Style(base).Style(overrides) は宣言を順に適用します。再利用できるビルダーの合成には .Merge(...) を使います。
func MergedCard() *ui.Element {
base := ui.Style().Padding(20).BorderRadius(8).Bg("#111827")
overrides := ui.Style().BorderRadius(12)
return ui.View().Child("Merged styles").Style(base).Style(overrides)
}#スタイルの再利用
ui.Style() は値を返します。メソッドは新しい値を返すので、共有スタイルが書き換えられることはありません。バリエーションを派生するときは戻り値を代入してください。
func SharedCard() *ui.Element {
card := ui.Style().Padding(20).BorderRadius(12)
emphasized := card.PaddingLeft(28).Bg("#1e293b")
return ui.View().Gap(12).Children(
ui.View().Child("Hello").Style(card).Bg("#111827"),
ui.View().Child("Another card").Style(emphasized),
)
}.When(condition, style) は条件が真のあいだ、追加のスタイルを適用します。リアクティブな条件には getter を渡します：.When(selected, ui.Style().Bg("#2563eb"))。セットアップ中に width() を渡すと現在の数値がキャプチャされます。更新し続けるときは width（getter）を渡してください。
#Flexbox
.Flex()、.FlexRow()、.FlexCol() で flex レイアウトを開始します。スクロールする子には .MinHeight(0) または .MinWidth(0) を付けて、縮小できるようにします。
func Row() *ui.Element {
return ui.View().Children(
ui.Text("Flexible content").Flex1().MinWidth(0),
ui.Button().Child("Action").FlexShrink(0),
).Flex().Gap(12).ItemsCenter()
}#グリッド
func Grid() *ui.Element {
return ui.View().Children(ui.Text("Sidebar"), ui.Text("Content")).
Display("grid").GridTemplateColumns("220px 1fr").Gap(16)
}.GridCols(3) と .ColSpanFull() も使えます。
#テキストと色
タイポグラフィは子に継承されます。色は hex、rgb() / rgba()、またはパックされた RGBA 値を受け付けます。パディングとボーダーは継承されません。
func TypographyExample() *ui.Element {
return ui.View().Children(
ui.Text("Inbox").FontSize(24).FontWeight(600),
ui.Text("All caught up."),
).TextColor("#334155").FontSize(14).Padding(20)
}#インタラクション状態
.Hover(...)、.Active(...)、.FocusStyle(...)、.DisabledStyle(...)、.SelectedStyle(...) を使います。ベーススタイルに .Transition(...) を付けると、描画の変化をアニメーションできます。トランジションとアニメーションを参照してください。
func SelectableButton() *ui.Element {
selected, setSelected := ui.CreateSignal(false)
button := ui.Style().Padding(12).Bg("#e5e7eb").
Hover(func(s ui.StyleBuilder) ui.StyleBuilder { return s.Opacity(0.85) })
return ui.Button().Child("Toggle selection").Style(button).
When(selected(), ui.Style().Bg("#2563eb").TextColor("white")).
OnClick(func() { setSelected(!selected()) })
}#グループと名前付きグループのホバー
.Group(true) は名前なしグループを付け、.Group("card") は名前を付けます。.GroupHover(...) は一番近い祖先グループに従います。.GroupHoverNamed("card", ...) はその名前を持つ一番近い祖先に従います。
func GroupExample() *ui.Element {
return ui.View().Child(
ui.Text("Changes when the card is hovered").
TextColor("#64748b").
GroupHoverNamed("card", func(s ui.StyleBuilder) ui.StyleBuilder {
return s.TextColor("#2563eb")
}),
).Group("card").Padding(20)
}.GroupActive(...) と .FocusWithin(...) は、押されたグループとフォーカスされたグループでも同じように動きます。これらの状態は描画プロパティを受け付けます。カーソルは設定できません。