各タブのコンテンツに名前を付けます
タブは同じコンテキストを持つ領域に一致します。異なるレベルのページではナビゲーションを使用する必要があります。
タブ デザインシステム
同じレベルのコンテンツ領域を切り替えます。
チェックリストの内容
確認の進捗
01
構造と意味
使用状況に応じて情報とプレゼンテーションを比較します。
02
インタラクションとユーザビリティ
操作を試し、ステータスを変更して作業を続行します。
03
体験を完了する
デザインを実用化する際に見落としがちな細部を確認してください。
進捗はこのブラウザーに自動保存されます。
ガイド
確認方法
使用例
使用例
各タブのコンテンツに名前を付けます
プロジェクトの詳細は「概要」「メンバー」「活動内容」を掲載しています。
バリエーションと利用場面
移動先と現在選択されているタブ
選択したタブをマークまたは位置で示し、ラベルに色が付いていなくても鮮明なままにします。
テーマを変更して、長いラベルが付いたタブを試してください。チェック マークは依然として正しいコンテンツを添付します。
例 請求書パネルが表示されたら、「請求書」タブに下線を引きます。
あなたのプロジェクト
新しいアップデートがあります
変更が保存されました
あなたのプロジェクト
新しいアップデートがあります
変更が保存されました
コンテンツはタブにロードされます
タブの読み込み状態とエラー状態を別々に保ち、コンテンツを古いタブの応答で置き換えないようにします。
最初のリクエストが遅い場合は、タブをすばやく変更します。現在のタブの応答のみが表示されます。
例 履歴を表示しているときに、概要の応答が遅くなってもパネルが変更されません。
あなたのプロジェクト
新しいアップデートがあります
変更が保存されました
フォーカス、選択は使用できません
選択したタブからフォーカスを区別します。使用できないタブには、見つけやすい理由が必要です。
Tab キーと矢印キーの操作。スクリーン リーダーは選択されたタブを正しく読み取ります。
例 「概要」が選択されている間、フォーカスの境界線はレポート上にある可能性があります。
あなたのプロジェクト
新しいアップデートがあります
変更が保存されました