ポップオーバーPopoverExperimental
トリガーに紐づく補足情報、軽いフォーム、状態、短い確認を画面遷移なしで表示します。
プレビュー
表示設定
一覧の見え方をその場で調整します。
標準 / 補足あり
状態とバリエーション
表示密度の変更
対象行の表示密度をその場で変更します。
表示設定
一覧の見え方をその場で調整します。
標準 / 補足あり
絞り込み条件
対象行の条件ボタンからフィルター入力を開きます。
レビュー担当者
担当者で一覧を絞り込む条件です。
未指定
公開前の確認
公開状態の行から、短い説明と確認操作を表示します。
公開状態
下書きを公開する前に短く確認します。
下書き
同期状態の詳細
同期状態の行から補助情報を表示します。
同期状態
現在の処理状態を短く補足します。
確認中
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| open | boolean | - | 開閉状態を制御する場合に使います。 |
| onOpenChange | (open: boolean) => void | - | 開閉状態の変更を受け取ります。 |
| side | "top" | "right" | "bottom" | "left" | "bottom" | 表示したい方向です。 |
| align | "start" | "center" | "end" | "center" | トリガーに対する揃え位置です。 |
| portalContainer | HTMLElement | null | - | docs preview やアプリ内フレームに overlay を閉じ込めるための任意コンテナです。 |
設計の判断
- 既定の幅を288pxに決め打ちした。資料は「3から5項目の設定やフィルターなら Popover、それ以上なら Modal に上げる」と書いています。GUNJO の
PopoverContentは幅を288pxに固定し、高さも画面に収まる分で頭打ちにしました（--radix-popper-available-heightと画面の高さから2rem引いた値の、小さいほう）。中身を増やすと先に窮屈になるので、Modal へ上げる判断が画面を見た時点で付きます。 - フォーカスの囲い込みはしない。資料は「Popover にフォーカストラップを付けると Modal と同じ重さになる」を禁止として挙げています。GUNJO は土台の Radix の Popover をそのまま使っており、開いたときのフォーカス移動と Escape と外側のクリックは受け持ちますが、Tab の囲い込みはしません。囲い込みが要るほど重い操作なら、最初から Modal を使う側の判断です。
- 画面端の逃げ方だけ既定を変えた。
collisionPaddingの既定を16にしてあります。0のままだと画面の端にぴったり貼り付いて読みにくいためです。portalContainerを渡すと、画面全体ではなくその要素の中に描きます。docs の埋め込みプレビューのように、画面いっぱいに出しては困る枠の中で使うために要ります。
使用コンポーネント
関連コンポーネント
いつ・なぜ使うか（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。