フォームと入力
フィールドの値はシグナルに置き、受け入れた変更はコールバックから書き戻します。
#テキスト入力
ui.Input と ui.TextArea はネイティブのテキストエディターです。Value をバインドし、OnInput から更新します。OnSubmit は 1 行入力の Return を扱います。
func InputExample() *ui.Element {
value, setValue := ui.CreateSignal("")
return ui.Input().
Value(value()).
Placeholder("Write here").
OnInputEvent(func(event *native.Event) { setValue(event.Value) }).
Width(320).Height(32)
}#フィールド
Field はラベル、コントロール、説明、エラーをまとめます。Required、Invalid、ValidationMessage は自分の状態から駆動してください。
func FieldExample() *ui.Element {
email, setEmail := ui.CreateSignal("")
field := ui.NewField(ui.FieldRootProps{
Required: true,
Filled: func() bool { return email() != "" },
})
return field.Root().FlexCol().Gap(6).Children(
field.Label().Child("Email"),
field.Control(ui.FieldControlProps{
InputPartProps: ui.InputPartProps{
Value: email,
Placeholder: "you@example.com",
OnInput: func(event *native.Event) { setEmail(event.Value) },
},
}),
field.Description().Child("Used for receipts"),
field.Error().Child("Enter a valid email address"),
)
}検証モードは Field を参照してください。
#選択コントロール
チェックボックスは bool または混合状態を受け付けます。ラジオグループは 1 つの値を保持します。チェックボックスグループとトグルグループは複数の値を保持できます。無効と読み取り専用は別です。
func CheckboxGroupExample() *ui.Element {
values, setValues := ui.CreateSignal([]string{"email"})
group := ui.NewCheckboxGroup(ui.CheckboxGroupProps{
AllValues: []string{"email", "push"},
Value: values,
OnValueChange: func(next []string, _ *native.Event) {
setValues(next)
},
})
email := ui.NewCheckbox(ui.CheckboxProps{Value: "email"})
push := ui.NewCheckbox(ui.CheckboxProps{Value: "push"})
return group.Root().FlexCol().Gap(8).Children(
email.Root().Child("Email"),
push.Root().Child("Push"),
)
}#Select
Select はリストから選びます。Combobox は入力と選択を組み合わせます。Autocomplete は自由入力を受け付けます。複数選択は Values と OnValuesChange を使います。
func SelectExample() *ui.Element {
value, setValue := ui.CreateSignal[*string](nil)
picker := ui.NewSelect(ui.SelectRootProps{
PickerSourceProps: ui.PickerSourceProps{
Items: func() []ui.OptionDeclaration {
return []ui.OptionDeclaration{
{Value: "go", Label: "Go"},
{Value: "swift", Label: "Swift"},
}
},
},
Value: value,
OnValueChange: func(next *string, _ *native.Event) {
setValue(next)
},
})
return picker.Root().Children(
picker.Value(),
picker.Icon().Child("▾"),
)
}#イベント
ボタンには OnClick(func() { ... }) を渡します。*native.Event が必要なときは OnClickEvent を使います。複合コントロールのコールバックには型付きの値が含まれ、関連する場合はイベントも付きます。UI の更新は UI ゴルーチンで行い、バックグラウンドの作業には ui.Async を使います。