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` へ委譲し、`size` variant クラスを付与する。
- `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 | |
| decrement-trigger | data-disabled | |
| increment-trigger | data-disabled | |
| input | data-disabled | |
| label | data-disabled | |
| root | data-disabled |
CSS Variables
| Variable | Default |
|---|---|
| --fandhe-number-input-control-height | 2.5rem |
| --fandhe-number-input-font-size | var(--fandhe-font-font-size-sm) |
| --fandhe-number-input-trigger-size | 1.5rem |