跳到正文
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.