Listbox

fandhe-frontend-pre-styled-ui の listbox mod が提供するスタイル済み Listbox 部品です。

Demo

headless-ui の Listbox（role="listbox"）に pre-styled-ui の recipe CSS を適用した静的掲示です。Select（ポップアップ型）と異なり trigger/positioner を持たず、常時展開のリストとして表示されます。左は single モード（1 項目選択済み、1 項目 disabled）、右は multiple モード（aria-multiselectable、複数項目選択済み・item-group 付き）です。

Fruit

Toppings

Features

headless-ui の listbox::root へ委譲し、size variant クラスを付与する。
selection_state（OpenState）・disabled の 2 軸を直接引数で受け取る。

Anatomy

root
  label
  content
    item
      item-text
      item-indicator
    item-group
      item-group-label

API Reference

Arguments

Name	Type	Default	Description
`size`	`Size`	`Size::Md`	サイズ variant。
`selection_state`	`OpenState`	`OpenState::Closed`	選択状態。
`disabled`	`bool`	`false`	無効化状態。
`attrs`	`Vec<(&str, &str)>`	—	root パーツへ合成する追加属性。
`children`	`Vec<Node>`	—	root 配下の子ノード。

Data Attributes

Part	Attribute	Observed Values
`content`	`data-orientation`	`vertical`
`item`	`data-disabled`	（値なし）
`item`	`data-orientation`	`vertical`
`item`	`data-selected`	（値なし）
`item`	`data-state`	`closed`, `open`
`item`	`data-value`	`apple`, `banana`, `cheddar`, `mozzarella`
`item-group`	`data-orientation`	`vertical`
`item-indicator`	`data-state`	`closed`, `open`
`item-text`	`data-disabled`	（値なし）
`item-text`	`data-state`	`closed`, `open`
`root`	`data-orientation`	`vertical`
`root`	`data-state`	`open`

CSS Variables

Variable	Default
`--fandhe-listbox-content-max-height`	`16rem`
`--fandhe-listbox-content-padding`	`var(--fandhe-space-2)`
`--fandhe-listbox-item-padding`	`var(--fandhe-space-2) var(--fandhe-space-3)`