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
item	data-disabled
item	data-state	closed, open
item	data-value	apple, banana, cheddar, mozzarella
item-indicator	data-state	closed, open
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)