Drawer

画面端からスライドインするパネルです。ark-ui・chakra-ui の Drawer は WAI-ARIA 上 Dialog パターンの変種であり、fandhe-frontend-headless-ui の drawer mod は新規状態機械を作らず dialog mod の開閉状態機械をそのまま再利用します。追加する要素は専用 anatomy（data-scope="drawer"）と、画面のどの端から出現するかを表す DrawerPlacement（Start/End/Top/Bottom、既定 End）のみです。fandhe-frontend-wasm-full の Escape・外側クリック配線は未対応（fail-closed のため未対応でも安全側）です。

スタイル済みの表示例は Drawer を参照してください。

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

Demo

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

Features

dialog パターンの変種として crate::dialog の Disclosure 状態機械をそのまま再利用する（新規状態機械を作らない）。
DrawerPlacement（Start/End/Top/Bottom、既定 End）で画面のどの端から出現するかを切り替え、root/positioner/content の data-placement へ反映する。
content は role="dialog" を固定付与する（Alertdialog 相当の variant は提供しない。常設ナビ・フィルタ等の補助パネル用途に一致させるため）。
fandhe-frontend-wasm-full の OverlayKind::from_scope は "drawer" を受理しないため、Escape/外側クリックの実 DOM 配線は別イシュー扱い（fail-closed のため未対応でも安全側）。

Anatomy

trigger
root
  backdrop
  positioner
    content
      title
      description
      close-trigger

API Reference

Arguments

Name	Type	Default	Description
root: state	OpenState	Closed	ドロワー全体の開閉状態（data-state へ反映）。
root: placement	DrawerPlacement	End	画面のどの端から出現するか（root/positioner/content の data-placement へ反映）。
trigger: state	OpenState	Closed	aria-expanded/data-state へ反映される開閉状態。
trigger: controls	Option<&str>		Some のとき aria-controls で content と関連付ける。
backdrop: state	OpenState	Closed	closed のとき hidden 存在属性を付与する背面レイヤーの開閉状態。
positioner: state	OpenState	Closed	closed のとき hidden 存在属性を付与する配置ラッパーの開閉状態。
positioner: placement	DrawerPlacement	End	data-placement へ反映される配置（styled 層が方向別レイアウトを切り替える起点）。
content: state	OpenState	Closed	開閉状態（closed のとき hidden 存在属性を付与）。
content: placement	DrawerPlacement	End	data-placement へ反映される配置。
content: modal	bool		aria-modal へ反映する値。
content: ids	ContentIds	ContentIds::default()	content 自身の id・aria-labelledby・aria-describedby をまとめた構造体（crate::dialog の型を再利用）。
title: id	Option<&str>		content の labelledby と対で aria-labelledby 関連付けを成立させる。
description: id	Option<&str>		content の describedby と対で aria-describedby 関連付けを成立させる。

Data Attributes

Part	Attribute	Observed Values
backdrop	data-state	open
content	data-placement	end
content	data-state	open
positioner	data-placement	end
positioner	data-state	open
root	data-placement	end
root	data-state	open
trigger	data-state	open

Examples

Start placement

DrawerPlacement::Start（既定 End とは逆側）から出現するナビゲーション用ドロワーの例です。

Accessibility

WAI-ARIA

Attribute	Description
aria-haspopup="dialog"	trigger に固定付与。
aria-expanded	trigger に付与。開閉状態を反映する。
aria-controls	trigger に付与。controls が Some のとき content と関連付ける。
aria-hidden="true"	backdrop に固定付与（装飾層のため読み上げ対象外）。
role="dialog"	content に固定付与（Alertdialog 相当の variant は提供しない）。
aria-modal	content に付与。modal 引数の値を反映する。
aria-labelledby / aria-describedby	content に付与。ids.labelledby/ids.describedby が Some のときのみ出力される。