オーバーレイのコンポーネント
ページの上に浮かぶものすべて。ダイアログと確認、サイドシートとスワイプできるドロワー、ポップオーバー、ホバーカード、ツールチップ、ドロップダウンとコンテキストメニュー、メニューバー、⌘K コマンドパレット。
開くとフォーカスが中に移り、閉じると戻ります。幅 320 ピクセルまで画面内に収まり、スマートフォンではダイアログがスワイプできるボトムシートになります。
- Alert dialog破壊的または重要な操作のための確認ダイアログです。非同期処理を待ち、スマートフォンではボトムシートになります。
- Commandインラインまたは⌘Kパレットとして使える、検索可能な操作リストです。ページ、ショートカット、一致箇所のハイライトに対応します。
- Context menu右クリックまたは長押しで開く操作メニューです。サブメニュー、チェックボックス項目、ラジオ項目に対応し、タッチでは長押しのフィードバックを返します。
- Dialogフォームや集中して行う作業のための、ページ上のウィンドウです。固定のヘッダーとフッター、入れ子に対応し、スマートフォンではスワイプできるボトムシートになります。
- Drawer任意の端からスライドインし、指に追従するパネルです。スナップポイント、実際に使えるハンドル、重なっていく入れ子のドロワーに対応します。
- Dropdown menuボタンの背後に、操作とオプションをまとめたメニューです。グループ、サブメニュー、チェックボックス項目、ラジオ項目、ショートカットに対応します。
- Hover cardリンクにホバーまたはフォーカスすると開くプレビューカードです。視覚で閲覧するユーザーがさっと確認できる内容向けです。
- Menubarデスクトップ風のメニューバー。開いているメニュー間をスライドする1つのハイライトがあり、端から端へ動かすと即座に切り替わります。
- Popoverトリガーにアンカーされたフローティングパネル。コンテンツに合わせてなめらかにサイズが変わり、トリガーの方向に従います。
- Sheet任意の端からスライドインするパネルです。スワイプで閉じる操作、スクロールロック、重なる入れ子に対応します。
- Tooltipホバーまたはキーボードフォーカスで、少し待ってから開く短いヒントです。隣り合う要素の間では即座に切り替わり、ショートカットも表示できます。
Pro ブロックでの利用
これらのコンポーネントで作られた AI プロダクト向けのブロック。
- API keysAI 製品の API キーページ。一度しか表示されないシークレット、取り消し可能な無効化、猶予期間付きのローテーションに対応します。
- BillingAI 製品のプランと使用量のページ。サイクル途中でのクレジット切れ、日割り計算付きのプラン変更、カードエラーに対応します。
- NotificationsAI 製品の設定にある「通知」セクション。イベントごとのチャネル表、通知を止める時間帯、プッシュ用のブラウザー権限に対応します。
- SecurityAI 製品の設定にある「セキュリティ」セクション。セッション、リカバリーコード付きの二要素認証、入力確認を経た削除に対応します。
- SettingsAI 製品の設定ページ。変更があったときだけ現れる保存バー、フィールドのエラー、読み込み中の状態に対応します。
- TeamAI 製品のワークスペース設定にあるチームページ。席数の上限、保留中の招待、入力確認を経た所有権の移譲に対応します。