Collapsible

単一の開閉パネルです。fandhe-frontend-headless-ui の collapsible mod は Root / Trigger / Indicator / Content の 4 anatomy パーツと、開閉状態を表す data-state・aria-expanded・aria-controls を提供します。開閉状態の遷移は open/close/toggle の dispatch で行い、closed のときは hidden 存在属性を付与して JS なしの SSR でも閉状態を表現します。 fandhe-frontend-pre-styled-ui にはまだ対応するスタイル済み部品がありません。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Hidden details revealed here.

Features

Disclosure を埋め込んだ単純な開閉状態機械 Collapsible を提供する（dispatch: open/close/toggle）。
Root / Trigger / Indicator / Content の 4 anatomy パーツで構成される。
trigger は type="button" を固定付与し、フォーム内配置時の意図しない submit を防ぐ。
content は closed のとき hidden 存在属性を付与し、JS なしの SSR でも閉状態を表現する。

Anatomy

root
  trigger
    indicator
  content

API Reference

Arguments

Name	Type	Default	Description
root: state	OpenState	Closed	パネル全体の開閉状態（data-state へ反映）。
root: disabled	bool		disabled 状態（data-disabled へ反映）。
trigger: state	OpenState	Closed	開閉状態（aria-expanded/data-state へ反映）。
trigger: disabled	bool		disabled 状態（ネイティブ disabled 属性 + data-disabled の両方へ反映）。
trigger: controls	Option<&str>		Some のとき aria-controls で content と関連付ける。
indicator: state	OpenState	Closed	開閉状態のみを data-state へ反映する最小主義な装飾用パーツ。
content: state	OpenState	Closed	開閉状態（closed のとき hidden 存在属性を付与）。
content: id	Option<&str>		trigger の controls と対で aria-controls 関連付けを成立させる。

Data Attributes

Part	Attribute	Observed Values
content	data-state	open
indicator	data-state	open
root	data-state	open
trigger	data-state	open

Examples

Disabled trigger

disabled な trigger はネイティブ disabled 属性と data-disabled が付与され、フォーカス・展開ができなくなります。

Accessibility

WAI-ARIA

Attribute	Description
aria-expanded	trigger に付与。開閉状態（open で true）を表す。
aria-controls	trigger に付与。controls が Some のとき対応する content の id を指す。