パネルの内容を述べます
メインコンテンツを表示するときにドロワーを選択すると、タスクがさらに役立ちます。
引き出し デザインシステム
メイン画面のコンテキストを維持したまま、セカンダリ コンテンツを開きます。
チェックリストの内容
確認の進捗
01
構造と意味
使用状況に応じて情報とプレゼンテーションを比較します。
02
インタラクションとユーザビリティ
操作を試し、ステータスを変更して作業を続行します。
03
体験を完了する
デザインを実用化する際に見落としがちな細部を確認してください。
進捗はこのブラウザーに自動保存されます。
ガイド
確認方法
使用例
使用例
パネルの内容を述べます
「注文の詳細」パネルが右側に開き、注文リストは背面に残ります。
バリエーションと利用場面
パネル開き方向
コンテンツに関連して開口部の端を選択し、画面間で宛先の一貫性を保ちます。
デスクトップとモバイルでパネルを試してください。名前と閉じるボタンは表示されたままになります。
例 レコードの詳細が右側に表示されます。携帯フィルターは下から開きます。
背景レイヤーとフォーカス
ドロワーがその背後にあるコンテンツをブロックするかどうかを決定します。モーダルドロワーはフォーカスを内部に保持します。
Tab、Escape、背景を使用します。閉じると、フォーカスは正しい開いたボタンに戻ります。
例 Esc キーを押してメッセージ ドロワーを閉じ、[メッセージ] ボタンにフォーカスします。
パネルレイアウト
長いパネルでも操作できるように、開始、スクロール コンテンツ、および終了アクションを分離します。
長いコンテンツやモバイル キーボードを試してください。確認ボタンは押して表示されなくなります。
例 フィルターのタイトルは上部に表示され、別のスクロール リストが表示され、下部に [適用] ボタンが表示されます。