Demo
headless-ui の DatePicker（popover 基盤 + Calendar 合成）に pre-styled-ui の recipe CSS を適用した静的掲示です。popover が開いた状態を固定表示し、内部に Calendar の月グリッドを合成しています。positioner はフロー内配置へ中和しています。
Features
- popover 基盤 + Calendar 合成の日付選択部品
- popover が開いた状態を固定表示し、positioner はフロー内配置へ中和する
- size（sm/md/lg）で寸法を切り替える
Anatomy
root
label
control
input
trigger
positioner
content
API Reference
Arguments
| Name | Type | Default | Description |
|---|
| size | Size | Md | 寸法 variant。 |
| state | OpenState | Closed | popover の開閉状態。 |
| attrs | Vec<(&str, &str)> | | root パーツへ合成する追加属性。 |
| children | Vec<Node> | | root 配下の子ノード。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|
| content | data-state | open |
| control | data-state | open |
| positioner | data-state | open |
| root | data-state | open |
| trigger | data-state | open |
CSS Variables
| Variable | Default |
|---|
| --fandhe-date-picker-content-padding | var(--fandhe-space-2) |
| --fandhe-date-picker-input-padding | var(--fandhe-space-2) var(--fandhe-space-3) |
Examples
開いた状態の掲示
入力欄 + トリガー + Calendar 月グリッドを popover 内に合成します。
Accessibility
Keyboard Interactions
| Key | Description |
|---|
| Escape | popover を閉じる（wasm 層実装）。 |
WAI-ARIA
| Attribute | Description |
|---|
| aria-expanded | トリガーが popover の開閉状態を伝える。 |