本文へスキップ
QuickGUI

OtpField

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

デモを読み込み中…

#インポート

quickgui から OtpField をインポートします。

use quickgui::*;

#使い方

let field = OtpField::new("code");
field.root().flex_row().gap(8.0)

#構成

  • OtpField::root
  • OtpField::input
  • OtpField::separator

#API リファレンス

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

OtpField

ソースを見る
pub fn new(root_id: impl Into<ElementId>) -> Self
auto_submitpub fn auto_submit(mut self, form: impl Into<ElementId>) -> Self—

Submit the named form as soon as the final slot is filled. QuickGUI routes the request through [`crate::EventContext::submit_form`], so the form is validated exactly as a Return press or a submit button would validate it. Pass the id of the nearest mounted [`crate::form`] ancestor.

pub fn auto_submit(mut self, form: impl Into<ElementId>) -> Self
ソースを見る
root_idpub const fn root_id(self) -> ElementId—

Configures root id for this part.

pub const fn root_id(self) -> ElementId
ソースを見る
submitted_formpub const fn submitted_form(self) -> Option<ElementId>—

Configures submitted form for this part.

pub const fn submitted_form(self) -> Option<ElementId>
ソースを見る
input_idpub fn input_id(self, index: usize) -> ElementId—

Configures input id for this part.

pub fn input_id(self, index: usize) -> ElementId
ソースを見る
separator_idpub fn separator_id(self, index: usize) -> ElementId—

Configures separator id for this part.

pub fn separator_id(self, index: usize) -> ElementId
ソースを見る

OtpField::root_with

ソースを見る
pub fn root_with(self, state: &OtpFieldState, root: Element) -> Element

Decorate an application-owned root without adding layout or appearance. The root is the group that names the whole code and carries its validity, so assistive technology announces one field rather than a row of unrelated one-character inputs.

OtpField::root

ソースを見る
pub fn root(self, state: &OtpFieldState) -> Element

Create the unstyled root part. Use [`Self::root_with`] to supply an existing element.

OtpField::input_with

ソースを見る
pub fn input_with(self, state: &OtpFieldState, index: usize, input: Element) -> Element

Decorate one application-owned slot input without adding appearance. Pass a [`crate::text_input`] built from [`OtpFieldState::slot_text`]. QuickGUI adds the stable identity, the slot's position in the code, the masked presentation, and the required and disabled policy. Use [`Self::slot_with`] to attach the behavior as well.

OtpField::input

ソースを見る
pub fn input(self, state: &OtpFieldState, index: usize) -> Element

Create the unstyled input part. Use [`Self::input_with`] to supply an existing element.

OtpField::separator_with

ソースを見る
pub fn separator_with(self, index: usize, separator: Element) -> Element

Decorate an application-owned separator between two slots. The separator is decorative: it carries a stable identity and the Separator role, and is hidden from assistive technology so it never interrupts the announced code.

OtpField::separator

ソースを見る
pub fn separator(self, index: usize) -> Element

Create the unstyled separator part. Use [`Self::separator_with`] to supply an existing element.

OtpField::slot_with

ソースを見る
pub fn slot_with<V: 'static, Change, Complete>( self, cx: &mut ViewContext<'_, V>, state: &OtpFieldState, index: usize, input: Element, access: fn(&mut V) -> &mut OtpFieldState, on_value_change: Change, on_complete: Complete, ) -> Element where Change: Fn(&mut V, &str, &mut EventContext) + Clone + 'static, Complete: Fn(&mut V, &str, &mut EventContext) + Clone + 'static,

Decorate one slot and attach its complete behavior. This registers the slot's input listener and its typed keyboard actions. Install [`otp_field_key_bindings`] once on the application keymap. `on_value_change` runs for every change with the whole code; `on_complete` runs only on the transition into a full code, and is followed by [`Self::auto_submit`] when one is declared.

OtpField::slot

ソースを見る
pub fn slot<V: 'static, Change, Complete>( self, cx: &mut ViewContext<'_, V>, state: &OtpFieldState, index: usize, access: fn(&mut V) -> &mut OtpFieldState, on_value_change: Change, on_complete: Complete, ) -> Element where Change: Fn(&mut V, &str, &mut EventContext) + Clone + 'static, Complete: Fn(&mut V, &str, &mut EventContext) + Clone + 'static,

Create the unstyled slot part. Use [`Self::slot_with`] to supply an existing element.

OtpField::slot_with_accessor

ソースを見る
pub fn slot_with_accessor<V: 'static, Change, Complete>( self, cx: &mut ViewContext<'_, V>, state: &OtpFieldState, index: usize, input: Element, access: StateAccessor<V, OtpFieldState>, on_value_change: Change, on_complete: Complete, ) -> Element where Change: Fn(&mut V, &str, &mut EventContext) + Clone + 'static, Complete: Fn(&mut V, &str, &mut EventContext) + Clone + 'static,

Decorate one slot and attach its behavior against a per-instance state accessor.