Number Input
fandhe-frontend-pre-styled-ui の number_input mod が提供するスタイル済み Number Input 部品です。
関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API
Demo
min/max/step でクランプされる数値入力。increment/decrement トリガーは境界到達時に data-disabled を伴い無効化されます。
Features
- headless-ui の
number_input::rootへ委譲し、sizevariant クラスを付与する。 disabled/invalidの 2 状態フラグを直接引数で受け取る。
Anatomy
root
label
control
input
increment-trigger
decrement-triggerAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
size | Size | Size::Md | サイズ variant。 |
disabled | bool | false | 無効化状態。 |
invalid | bool | false | 入力検証エラー状態。 |
attrs | Vec<(&str, &str)> | — | root パーツへ合成する追加属性。 |
children | Vec<Node> | — | root 配下の子ノード（通常インクリメント/デクリメントトリガーを含む）。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
control | data-disabled | （値なし） |
control | data-readonly | （値なし） |
decrement-trigger | data-disabled | （値なし） |
increment-trigger | data-disabled | （値なし） |
input | data-disabled | （値なし） |
input | data-readonly | （値なし） |
label | data-disabled | （値なし） |
root | data-disabled | （値なし） |
root | data-readonly | （値なし） |
CSS Variables
| Variable | Default |
|---|---|
--fandhe-number-input-control-height | 2.5rem |
--fandhe-number-input-font-size | var(--fandhe-size-control-font-size-md, var(--fandhe-font-font-size-md)) |
--fandhe-number-input-padding-x | 1rem |
--fandhe-number-input-trigger-size | 1.5rem |