本文へスキップ
QuickGUI

OtpField

個別にスタイルできる入力セルで構成された、長さ制限付きのワンタイムコードエディターです。

デモを読み込み中…

#インポート

github.com/egoist/quickgui/go/ui から ui をインポートします。

import (
	"fmt"
	"github.com/egoist/quickgui/go/native"
	"github.com/egoist/quickgui/go/ui"
)

#使い方

func OtpFieldExample() *ui.Element {
	code, setCode := ui.CreateSignal("")
	field := ui.NewOtpField(ui.OtpFieldRootProps{Value: code, Length: 6, ValidationType: "numeric", OnValueChange: func(next string, _ *native.Event) {
		setCode(next)
	}, OnComplete: func(value string, _ *native.Event) {
		fmt.Println("Complete:", value)
	}})
	inputs := make([]*ui.Element, 0, 6)
	for index := range 6 {
		inputs = append(inputs, field.Input(index))
	}
	return field.Root().Children(inputs)
}

#構成

  • otpField.Root
  • otpField.Input
  • otpField.Separator

#API リファレンス

項目を展開すると説明と完全なシグネチャが表示されます。ダッシュは宣言に既定値が記載されていないことを示します。

NewOtpField

ソースを見る
ui.NewOtpField(props ...OtpFieldRootProps) *OtpFieldComponent

NewOtpField declares a OtpField instance. Optional props provide initial settings.

Reffunc(*native.Node)—

Receives the retained native node after construction. Keep imperative work in event or lifecycle callbacks.

func(*native.Node)
ソースを見る
Styleany—

Reusable layout, typography, color, and interaction-state styles. Build with ui.Style() and compose with Merge.

any
ソースを見る
ChildrenPartChildren—

Content mounted inside the component. Compound child callbacks run after the parent context exists.

PartChildren
ソースを見る
Disabledany—

Prevents activation and exposes the disabled state to accessibility. Compound parts inherit a disabled root.

any
ソースを見る
Rolestring—

Accessibility role override. Prefer the component’s built-in semantics.

string
ソースを見る
FocusOnPointerany—

Whether a pointer press moves keyboard focus to the control.

any
ソースを見る
Groupany—

Names this element as a group for descendant interaction-state styling.

any
ソースを見る
AriaLabelany—

Accessible name, especially for icon-only controls or controls without a visible label.

any
ソースを見る
TabIndex*float64—

Controls sequential keyboard focus order. Omit to retain the component’s default focus behavior.

*float64
ソースを見る
OnClickfunc(*native.Event)—

Called after QuickGUI resolves an activation, including supported keyboard activation.

func(*native.Event)
ソースを見る
OnDoubleClickfunc(*native.Event)—

Callback for double click. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnContextMenufunc(*native.Event)—

Callback for context menu. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnPointerfunc(*native.Event)—

Callback for pointer. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnMouseEnterfunc(*native.Event)—

Callback for mouse enter. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnMouseLeavefunc(*native.Event)—

Callback for mouse leave. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnMouseDownfunc(*native.Event)—

Callback for mouse down. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnMouseUpfunc(*native.Event)—

Callback for mouse up. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnKeyDownfunc(*native.Event)—

Callback for key down. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnKeyUpfunc(*native.Event)—

Callback for key up. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnFocusfunc(*native.Event)—

Callback for focus. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnBlurfunc(*native.Event)—

Callback for blur. The signature below lists the event payload.

func(*native.Event)
ソースを見る
Valuefunc() string—

The current controlled value. Update application state from the change callback to accept a new value.

func() string
ソースを見る
DefaultValuestring—

Initial value for uncontrolled state. Use Value when the application should own subsequent changes.

string
ソースを見る
Lengthany—

Number of one-time-code input slots, bounded to twelve.

any
ソースを見る
ValidationTypestring—

Validation strategy applied to the field.

string
ソースを見る
Mask*bool—

Whether the input conceals its entered value.

*bool
ソースを見る
ReadOnlybool—

Preserves the current value while keeping the control available for focus and inspection.

bool
ソースを見る
Requiredbool—

Marks the control as required for validation and accessibility.

bool
ソースを見る
AutoSubmitstring—

Submits the one-time code after every required cell has a value.

string
ソースを見る
OnValueChangefunc(string, *native.Event)—

Reports an accepted value change. Use the callback payload to update controlled state.

func(string, *native.Event)
ソースを見る
OnCompletefunc(string, *native.Event)—

Callback for complete. The signature below lists the event payload.

func(string, *native.Event)
ソースを見る

OtpField.Disabled

ソースを見る
otpField.Disabled(value any) *OtpFieldComponent

Prevents activation and exposes the disabled state to accessibility. Compound parts inherit a disabled root.

OtpField.Value

ソースを見る
otpField.Value(value any) *OtpFieldComponent

The current controlled value. Update application state from the change callback to accept a new value.

OtpField.DefaultValue

ソースを見る
otpField.DefaultValue(value string) *OtpFieldComponent

Initial value for uncontrolled state. Use Value when the application should own subsequent changes.

OtpField.Length

ソースを見る
otpField.Length(value any) *OtpFieldComponent

Number of one-time-code input slots, bounded to twelve.

OtpField.ValidationType

ソースを見る
otpField.ValidationType(value string) *OtpFieldComponent

Validation strategy applied to the field.

OtpField.Mask

ソースを見る
otpField.Mask(value bool) *OtpFieldComponent

Whether the input conceals its entered value.

OtpField.ReadOnly

ソースを見る
otpField.ReadOnly(value bool) *OtpFieldComponent

Preserves the current value while keeping the control available for focus and inspection.

OtpField.Required

ソースを見る
otpField.Required(value bool) *OtpFieldComponent

Marks the control as required for validation and accessibility.

OtpField.AutoSubmit

ソースを見る
otpField.AutoSubmit(value string) *OtpFieldComponent

Submits the one-time code after every required cell has a value.

OtpField.OnValueChange

ソースを見る
otpField.OnValueChange(value func(string, *native.Event)) *OtpFieldComponent

Reports an accepted value change. Use the callback payload to update controlled state.

OtpField.OnComplete

ソースを見る
otpField.OnComplete(value func(string, *native.Event)) *OtpFieldComponent

Callback for complete. The signature below lists the event payload.

OtpField.Root

ソースを見る
otpField.Root() *Element

Configures root for this part. The declared type and source define the accepted value.

OtpField.Input

ソースを見る
otpField.Input(value int, options ...OtpFieldInputProps) *Element

Configures input for this part. The declared type and source define the accepted value.

OtpField.InputWith

ソースを見る
otpField.InputWith(props OtpFieldInputProps) *Element

InputWith supplies explicit properties for this part.

Reffunc(*native.Node)—

Receives the retained native node after construction. Keep imperative work in event or lifecycle callbacks.

func(*native.Node)
ソースを見る
Styleany—

Reusable layout, typography, color, and interaction-state styles. Build with ui.Style() and compose with Merge.

any
ソースを見る
ChildrenPartChildren—

Content mounted inside the component. Compound child callbacks run after the parent context exists.

PartChildren
ソースを見る
Disabledany—

Prevents activation and exposes the disabled state to accessibility. Compound parts inherit a disabled root.

any
ソースを見る
Rolestring—

Accessibility role override. Prefer the component’s built-in semantics.

string
ソースを見る
FocusOnPointerany—

Whether a pointer press moves keyboard focus to the control.

any
ソースを見る
Groupany—

Names this element as a group for descendant interaction-state styling.

any
ソースを見る
AriaLabelany—

Accessible name, especially for icon-only controls or controls without a visible label.

any
ソースを見る
TabIndex*float64—

Controls sequential keyboard focus order. Omit to retain the component’s default focus behavior.

*float64
ソースを見る
OnClickfunc(*native.Event)—

Called after QuickGUI resolves an activation, including supported keyboard activation.

func(*native.Event)
ソースを見る
OnDoubleClickfunc(*native.Event)—

Callback for double click. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnContextMenufunc(*native.Event)—

Callback for context menu. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnPointerfunc(*native.Event)—

Callback for pointer. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnMouseEnterfunc(*native.Event)—

Callback for mouse enter. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnMouseLeavefunc(*native.Event)—

Callback for mouse leave. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnMouseDownfunc(*native.Event)—

Callback for mouse down. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnMouseUpfunc(*native.Event)—

Callback for mouse up. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnKeyDownfunc(*native.Event)—

Callback for key down. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnKeyUpfunc(*native.Event)—

Callback for key up. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnFocusfunc(*native.Event)—

Callback for focus. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnBlurfunc(*native.Event)—

Callback for blur. The signature below lists the event payload.

func(*native.Event)
ソースを見る
Typestring—

Input editing mode for this control.

string
ソースを見る
Valueany—

The current controlled value. Update application state from the change callback to accept a new value.

any
ソースを見る
Placeholderstring—

Hint displayed while the text value is empty.

string
ソースを見る
Multilinebool—

Allows multiple lines in the core text editor.

bool
ソースを見る
OnInputfunc(*native.Event)—

Receives edits from the text control. Write the new text into the controlled value.

func(*native.Event)
ソースを見る
OnChangefunc(*native.Event)—

Callback for change. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnSubmitfunc(*native.Event)—

Called when the control submits its current value.

func(*native.Event)
ソースを見る
Indexint—

Zero-based index associated with this repeated part.

int
ソースを見る

OtpField.Separator

ソースを見る
otpField.Separator(value int, options ...OtpFieldSeparatorProps) *Element

Configures separator for this part. The declared type and source define the accepted value.

OtpField.SeparatorWith

ソースを見る
otpField.SeparatorWith(props OtpFieldSeparatorProps) *Element

SeparatorWith supplies explicit properties for this part.

Reffunc(*native.Node)—

Receives the retained native node after construction. Keep imperative work in event or lifecycle callbacks.

func(*native.Node)
ソースを見る
Styleany—

Reusable layout, typography, color, and interaction-state styles. Build with ui.Style() and compose with Merge.

any
ソースを見る
ChildrenPartChildren—

Content mounted inside the component. Compound child callbacks run after the parent context exists.

PartChildren
ソースを見る
Disabledany—

Prevents activation and exposes the disabled state to accessibility. Compound parts inherit a disabled root.

any
ソースを見る
Rolestring—

Accessibility role override. Prefer the component’s built-in semantics.

string
ソースを見る
FocusOnPointerany—

Whether a pointer press moves keyboard focus to the control.

any
ソースを見る
Groupany—

Names this element as a group for descendant interaction-state styling.

any
ソースを見る
AriaLabelany—

Accessible name, especially for icon-only controls or controls without a visible label.

any
ソースを見る
TabIndex*float64—

Controls sequential keyboard focus order. Omit to retain the component’s default focus behavior.

*float64
ソースを見る
OnClickfunc(*native.Event)—

Called after QuickGUI resolves an activation, including supported keyboard activation.

func(*native.Event)
ソースを見る
OnDoubleClickfunc(*native.Event)—

Callback for double click. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnContextMenufunc(*native.Event)—

Callback for context menu. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnPointerfunc(*native.Event)—

Callback for pointer. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnMouseEnterfunc(*native.Event)—

Callback for mouse enter. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnMouseLeavefunc(*native.Event)—

Callback for mouse leave. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnMouseDownfunc(*native.Event)—

Callback for mouse down. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnMouseUpfunc(*native.Event)—

Callback for mouse up. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnKeyDownfunc(*native.Event)—

Callback for key down. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnKeyUpfunc(*native.Event)—

Callback for key up. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnFocusfunc(*native.Event)—

Callback for focus. The signature below lists the event payload.

func(*native.Event)
ソースを見る
OnBlurfunc(*native.Event)—

Callback for blur. The signature below lists the event payload.

func(*native.Event)
ソースを見る
Index*int—

Zero-based index associated with this repeated part.

*int
ソースを見る

Element

ソースを見る
part.Child(content).Style(style)

Every part returns a fluent element. Strings, numbers, elements, and deferred child factories compose directly.

ChildChild(child any) *Element—

Child appends content and returns this element. Content can be an element, native node, scalar, accessor, or node-returning construction callback. 

Child(child any) *Element
ソースを見る
ChildrenChildren(children ...any) *Element—

Children appends multiple children in order without replacing existing content. It also accepts []any, []*Element, and []*native.Node slices as arguments. Read the retained child nodes through element.Node.Children. 

Children(children ...any) *Element
ソースを見る
StyleStyle(style StyleBuilder) *Element—

Style merges a reusable style. Scalar accessors retain independent native bindings. 

Style(style StyleBuilder) *Element
ソースを見る
OnClickOnClick(handler func()) *Element—

OnClick handles a click without an unused event parameter. 

OnClick(handler func()) *Element
ソースを見る
RefRef(handler func(*native.Node)) *Element—

Ref exposes the native handle once at this point in the declaration chain. 

Ref(handler func(*native.Node)) *Element
ソースを見る