Combobox

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

Demo

headless-ui の Combobox（role="combobox"）に pre-styled-ui の recipe CSS を適用した静的掲示です。入力値 "re" による filter_options の絞り込み結果を候補として表示しています。positioner はフロー内配置へ中和しています。

Framework

Features

headless-ui の `combobox::root` へ委譲し、`size` variant クラスのみを付与する。
開閉状態は `OpenState`（`Open`/`Closed`）で受け取る。

Anatomy

root
  label
  control
    input
    trigger
  positioner
    content
      item
        item-text

API Reference

Arguments

Name	Type	Default	Description
size	Size	Size::Md	サイズ variant。
state	OpenState	OpenState::Closed	開閉状態。
attrs	Vec<(&str, &str)>		root パーツへ合成する追加属性。
children	Vec<Node>		root 配下の子ノード。

Data Attributes

Part	Attribute	Observed Values
content	data-state	open
control	data-state	open
input	data-state	open
item	data-state	closed
item	data-value	react
positioner	data-state	open
root	data-state	open
trigger	data-state	open

CSS Variables

Variable	Default
--fandhe-combobox-content-padding	var(--fandhe-space-2)
--fandhe-combobox-control-padding	var(--fandhe-space-1) var(--fandhe-space-2)
--fandhe-combobox-input-padding	var(--fandhe-space-1) var(--fandhe-space-2)
--fandhe-combobox-item-padding	var(--fandhe-space-2) var(--fandhe-space-3)