ガイドライン
Popover
ポップオーバーはトリガーからウィンドウパネルを展開するために使用するコンポーネントです。
Anatomy: 解剖図
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
| 1 | Container | コンテナ要素 | — | |
| 2 | Header | ヘッダー要素 | 任意 | |
| 3 | Body | ボディ要素 | — | |
| 4 | Footer | フッター要素 | 任意 |
Options: 選択肢
Placement
top-start
トリガー上部の左側にポップオーバーが配置されるオプションです。
top-mid
トリガー上部の中央にポップオーバーが配置されるオプションです。
top-end
トリガー上部の右側にポップオーバーが配置されるオプションです。
bottom-start
トリガー下部の左側にポップオーバーが配置されるオプションです。
bottom-mid
トリガー下部の中央にポップオーバーが配置されるオプションです。
bottom-end
トリガー下部の中央にポップオーバーが配置されるオプションです。
left-start
トリガー左側の上部にポップオーバーが配置されるオプションです。
left-mid
トリガー左側の中央にポップオーバーが配置されるオプションです。
left-end
トリガー左側の下部にポップオーバーが配置されるオプションです。
right-start
トリガー右側の上部にポップオーバーが配置されるオプションです。
right-mid
トリガー右側の中央にポップオーバーが配置されるオプションです。
right-end
トリガー右側の下部にポップオーバーが配置されるオプションです。
isHeader
true
デフォルトのポップオーバーです。
false
ヘッダーを無効化した状態です。
トリガーがポップオーバーの見出しを代替している場合など、タイトルがなくてもポップオーバーの役割を伝達できる場合はヘッダーを非表示にすることができます。
true
フッターを有効化した場合のスタイルです。
ポップオーバーを介してユーザーがインタラクションを行う場合はフッターを有効化し、トリガーを配置します。
false
フッターが無効化されているデフォルトの状態です。
閲覧専用のポップオーバーを展開する場合はこのレイアウトを活用します。
isCloseTrigger
true
クローズボタンがあるスタイルです。
false
クローズボタンがないスタイルです。基本的に、ポップオーバーの外側、またはトリガーを再度クリックして閉じることができます。
isArrow
true
矢印を表示するスタイルです。
false
矢印を表示しないスタイルです。
Behaviors: 振る舞い
レイアウト
Popoverはトリガーと4pxの隙間を空けて配置されます。
Metrics: 寸法
- Vertical Resizing: Hug
- Horizontal Resizing: 320px
- Container Height: Hug
- Item Spacing: 0px
- padding Vertical: 16px
- padding Horizontal: 0px
Usage: 使い方
ポップオーバーを用いることで簡略化されたインターフェイスに対して補足の情報やコンテンツのを補完できます。
ポップオーバーには、ユーザーが素早く操作できる簡単なコンポーネントを配置することができます。
Change log: 変更履歴
| Date | Changes |
|---|---|
| 2025/2/12 | ドキュメントを公開 |
