jui-popover | Jellee Docs

要素をクリックした際に表示されるポップアップコンテンツです。追加情報やミニフォームの表示に使用します。

Basic

jui-popover の最も基本的な使用例です。

ポップオーバー表示

お知らせ

ここには追加の情報を配置できます。

WAI-ARIA:
- トリガー要素に aria-expanded、aria-haspopup="dialog"、aria-controls 属性が自動的に設定され、ポップオーバーの開閉状態が支援技術に伝わります。
- ポップオーバーコンテンツには適切な role が付与されます。
キーボードナビゲーション:
- Escape キーでポップオーバーを閉じることができます。
- ポップオーバーを閉じた後、フォーカスはトリガー要素に自動的に復元されます。
- Tab キーでトリガー要素にフォーカスし、Enter または Space キーで開閉を切り替えできます。

プロパティ	説明	デフォルト値
`--jui-popover-width`	ポップオーバーの幅	`auto`
`--jui-popover-max-width`	ポップオーバーの最大幅	`320px`

その他のスタイルはグローバルのデザイントークン（--jui-color-background, --jui-color-border, --jui-radius-md, --jui-shadow-lg 等）を参照して適用されます。

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
CSS Custom Properties	デザイントークン	49+	31+	9.1+	Baseline 2016
`:focus-visible`	キーボードフォーカスリング	86+	85+	15.4+	Baseline 2022
`color-mix()`	ホバー色生成	111+	113+	16.4+	Baseline 2023
`::slotted()`	Shadow DOM スロットスタイル	53+	63+	10+	Baseline 2018

💡 いずれの機能も Baseline 2023 以前に到達しており、主要ブラウザで広く対応済みです。

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
`disabled`	`disabled`	無効状態	`boolean`	`false`
`heading`	`heading`	ポップオーバーのタイトル	`string`	`''`
`offset`	`offset`	ポップオーバーとトリガー間のオフセット（px）	`number`	`8`
`open`	`open`	外部制御用の開閉状態	`boolean`	`false`
`placement`	`placement`	配置方向	`"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "right" \| "top" \| "top-end" \| "top-start"`	`'top'`
`showArrow`	`show-arrow`	アロー表示	`boolean`	`true`
`trigger`	`trigger`	トリガー種別	`"click" \| "hover"`	`'click'`

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
`juiClose`	ポップオーバーが閉じた時に発火	`CustomEvent<void>`
`juiOpen`	ポップオーバーが開いた時に発火	`CustomEvent<void>`

コンポーネント内に子要素を挿入するためのスロット一覧です。

Slot	Description
	トリガー要素
`"content"`	ポップオーバーコンテンツ

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Built with StencilJS