Skip to content
fandhe-frontend
GitHub

Pin Input

fandhe-frontend-pre-styled-uipin_input mod が提供するスタイル済み Pin Input 部品です。

関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API

Demo

PIN コード等、固定桁数の入力に使う部品。`complete`/`disabled` の 2 状態を持つ。

Features

  • `size` variant クラスを `root` へ付与し、headless-ui の `pin_input::root` へ委譲する。
  • `complete`(全桁入力済み)・`disabled` の 2 状態フラグを直接引数で受け取る。

Anatomy

root

API Reference

Arguments

NameTypeDefaultDescription
sizeSizeSize::Mdサイズ variant。
completeboolfalse全桁入力済み状態。
disabledboolfalse無効化状態。
attrsVec<(&str, &str)>root パーツへ合成する追加属性。
childrenVec<Node>root 配下の子ノード(通常 1 桁ずつの input パーツ列)。

CSS Variables

VariableDefault
--fandhe-pin-input-font-sizevar(--fandhe-font-font-size-md)
--fandhe-pin-input-size2.5rem