Popover

トリガー起点のオーバーレイです。fandhe-frontend-headless-ui の popover mod は Root / Trigger / Anchor / Positioner / Arrow / ArrowTip / Content / Title / Description / CloseTrigger / Indicator の 11 anatomy パーツを提供します。trigger は aria-haspopup="dialog"・aria-expanded・（controls が指定されたときの）aria-controls を持ち、content は role="dialog" を固定付与します。

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

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

Demo

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

Features

Root / Trigger / Anchor / Positioner / Arrow / ArrowTip / Content / Title / Description / CloseTrigger / Indicator の 11 anatomy パーツと、Disclosure を埋め込んだ開閉状態機械 Popover を提供する。
trigger は type="button" を固定付与し、aria-haspopup="dialog"・aria-expanded・（controls が Some のとき）aria-controls を持つ。
content は role="dialog" を固定付与し、labelledby/describedby が Some のときのみ title/description と対で関連付ける。

Anatomy

root
  trigger
  anchor
  positioner
    content
      arrow
        arrow-tip
      title
      description
      close-trigger
      indicator

API Reference

Arguments

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

Data Attributes

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

Examples

Minimal content

title/description を持たず close_trigger のみを含む、最小構成の Popover content の例です。

Accessibility

WAI-ARIA

Attribute	Description
aria-haspopup="dialog"	trigger に固定付与。
aria-expanded	trigger に付与。開閉状態を反映する。
aria-controls	trigger に付与。controls が Some のとき content と関連付ける。
role="dialog"	content に固定付与。
aria-labelledby / aria-describedby	content に付与。labelledby/describedby が Some のときのみ出力される。