オーバーレイの概要
現在の画面の上に、一時的な情報、操作、確認、選択肢を重ねるコンポーネント群です。閉じ方、背景との関係、操作の重要度で使い分けます。
コンポーネント一覧
各コンポーネントの詳細ページへ移動して、プレビュー、コード、プロパティを確認できます。
確認ダイアログ
AlertDialog削除や破棄など、重要な操作の前に明示的な確認を求めるモーダルダイアログです。
チャットパネル
ChatPanelチャットメッセージとチャット入力を組み合わせ、サポートやアシスタントの会話面を構成するパネルです。
コンテキストメニュー
ContextMenu右クリックで開くメニューです。
ダイアログ
Dialog背後を無効化したオーバーレイのウィンドウです。
ドロワー
Drawer画面の端から補助的な内容を開き、設定や詳細をその場で確認できるドロワーです。
ドロップダウン
DropdownMenuボタンで開くメニュー（アクションや機能の一覧）を表示します。
フローティングパネル
FloatingPanel作業面やキャンバス上に、ツール、状態、補助情報を重ねて表示するパネルです。必要に応じてドラッグやリサイズも有効化できます。
ホバーカード
HoverCardリンク先の内容をプレビュー表示するカードです。
メディアライトボックス
MediaLightboxメディアを大きく確認するための、ズーム・前後移動・操作付きライトボックスです。
メディア選択ダイアログ
MediaPickerDialogライブラリ内のアセットを検索し、単体または複数選択するためのダイアログです。
モーダル
Modal現在の画面に重ねて、確認・入力・重要な補足を短い操作面として表示します。
オンボーディング
OnboardingFlow初期設定や導入手順を複数ステップに分けて案内するフローです。
ポップオーバー
Popoverトリガーに紐づく補足情報、軽いフォーム、状態、短い確認を画面遷移なしで表示します。
共有モーダル
ShareModal公開リンクの有効化、URLコピー、共有状態の確認をまとめて扱うモーダルです。
シート
Sheet現在の画面を残したまま、補助的な設定・フォーム・ナビゲーションを画面端から表示する Dialog ベースのパネルです。
ツールチップ
Tooltipホバーやフォーカス時に、操作名・補足・無効理由などの短い情報を表示します。
補足情報
一覧でコンポーネントを選んだあとに確認する、カテゴリ全体の責務、共通ルール、使い分けです。
このカテゴリの責務
現在の画面を離れずに、一時的な選択、補足、確認、編集を行うための表示面を提供します。
このページの使い方
まずカテゴリの責務を確認し、迷いやすい使い分けから該当コンポーネントへ移動します。
パターンで確認する場面
実画面に近いフレームの中で、モーダル、シート、メニュー、ツールチップがページ全体へ漏れずに動くか確認します。
オーバーレイ系の共通ルール
カテゴリ内で共通して守るべき判断基準です。
docs プレビューではページ全体ではなく、プレビュー内の文脈に収まる表示を優先します。
見切れは高さ追加で隠さず、配置、ポータル、collision、overflow の責務を確認します。
迷いやすい使い分け
似ているコンポーネントを選ぶ時の入口です。
確認や破壊的操作は AlertDialog、フォームや詳細編集は Dialog/Modal、補助パネルは Sheet/Drawer を使います。
軽い補足は Tooltip/HoverCard、短い設定や選択は Popover/DropdownMenu/ContextMenu を使います。
最初に確認するページ
重ねる情報の重さ、閉じ方、入力を伴うかどうかで選び始めます。
避ける使い方
オーバーレイは表示位置と閉じ方が UX の大半を決めます。見切れやページ全体への漏れを放置しません。
見切れをプレビュー高さの追加だけで隠す。
モーダルやシートを docs プレビュー外のページ全体へ漏らす。
アイコンだけの閉じる、コピー、共有などにツールチップを付けない。