Sparkle Design

Vertical Tabs

バーティカルタブはユーザーが扱う情報をシンプルに保つためのディスクロージャーとして使用するコンポーネントです。

Figma
Vertical Tabs の概要図

Anatomy: 解剖図

Vertical Tabs

Vertical Tabsの構成要素を示す解剖図。1はグループタイトルであるParentを、2は子アイテム要素であるChildを示しています。
ItemNameDescriptionComponentOptional
1Parentグループタイトル任意
2Child子アイテム要素—

Parent

Parentの構成要素を示す解剖図。1はアイテム要素であるParentを、2はコンテキストを付与するためのテキスト要素であるLabelを、3はタブを展開/折り畳みするためのアイコン要素であるiconを示します。
ItemNameDescriptionComponentOptional
1Parentアイテム要素—
2Labelコンテキストを付与するためのテキスト要素—
3iconタブを展開/折り畳みするためのアイコン要素Icon—

Options: 選択肢

isSelected:True

isSelected:False

isExpanded:True

選択状態かつ展開状態のVertical Tabsの図です。

子アイテムを選択して開いたオプションです。

非選択状態かつ展開状態のVertical Tabsの図です。

親タイトルを開いたオプションです。

isExpanded:False

選択状態かつ折り畳み状態のVertical Tabsの図です。

子アイテムを選択して閉じたオプションです。

非選択状態かつ折り畳み状態のVertical Tabsの図です。

親タイトルを閉じたオプションです。

States: 状態

Parent

ParentのEnable状態の画像です。

Enable

ユーザーがグループタイトルを操作する前のデフォルトの状態。

ParentのHover状態の画像です。

Hover

ユーザーがグループタイトルにマウスオーバーしている状態。

ParentのFocus状態の画像です。

Focus

ユーザーがタッチ操作や、キーボードや音声による操作を用いてボタンに注視している状態。

ParentのDisabled状態の画像です。

Disabled

システムによってグループタイトルが非活性化されている状態。ユーザーによる操作は不能です。

Child

ChildのEnable状態の画像です。

Enable

ユーザーが子アイテムを操作する前のデフォルトの状態。

ChildのHover状態の画像です。

Hover

ユーザーが子アイテムにマウスオーバーしている状態。

ChildのFocus状態の画像です。

Focus

ユーザーがタッチ操作や、キーボードや音声による操作を用いてボタンに注視している状態。

ChildのDisabled状態の画像です。

Disabled

システムによって子アイテムが非活性化されている状態。ユーザーによる操作は不能です。

Behaviors: 振る舞い

選択状態の反映

子アイテム選択時の選択状態反映を示す図です。

子アイテムが選択された場合

グループ内の任意の子アイテムが選択されると、そのグループタイトルも選択状態として表示されます。

子アイテム非選択時の選択状態反映を示す図です。

子アイテムが選択されていない場合

グループタイトルを展開しても、子アイテムが選択されていない限り、グループタイトル自体は選択状態になりません。選択状態になるのは、あくまで子アイテムが選ばれた時のみです。

アイコンの変化

グループタイトルが展開されると、対応するアイコンはchevron_right（右向き矢印）からexpand_more（下向き矢印）に変わります

アイコンの変化を示す図です。

テキストオーバーフロー

ラベルが利用可能な水平スペースに対して長すぎる場合は、折り返されて別の行になります。

テキストオーバーフローの折り返し処理として、折り返されていることを示している図です。

全文を表示することによるレイアウト崩れが許容しきれないほど大きい場合は省略表現を利用します。その際はユーザーに全量を確認する方法を提供します。

テキストオーバーフローの折り返し処理として、省略表現を示している図です。

Metrics: 寸法

Vertical Tabs

  • Vertical Resizing: Hug
  • Horizontal Resizing: Hug
  • Container Height: 32px
  • Item Spacing: 4px
Vertical Tabsの寸法仕様を示す図です。

Parent

  • Vertical Resizing: Hug
  • Horizontal Resizing: Fixed
  • Container Height: 40px
  • Item Spacing: 2px
  • Padding Vertical: 8px
  • Padding Horizontal: 16px
Parentの寸法仕様を示す図です。

Child

  • Vertical Resizing: Hug
  • Horizontal Resizing: Fixed
  • Container Height: 40px
  • Padding Vertical: 8px
  • Padding Horizontal: 16px
Childの寸法仕様を示す図です。

Usage: 使い方

適切な配置例。左側にVertical Tabsが配置され右側に広いコンテンツ領域が確保されている図です。
Do

コンテンツの領域を確保できるように配置します。その際に、高さも十分確保できるようにしてください。

不適切な配置例。左側にVertical Tabsが配置され右側のコンテンツ領域を狭めるような配置を示している図です。
Don’t

コンテンツの領域を狭めるような配置をしないでください。

不適切な使用例。「ヨーロッパ」というグループタイトルの下に「オセアニア」「北米」という項目が配置されている図です。
Don’t

グループタイトルにリンクを置くことはできません。子アイテムを使用してください。

注意事項の例。Vertical Tabsの項目が「国内」「海外」という項目が配置されている図です。
Caution

Vertical Tabsを使用するとUI上の多くのスペースを占有します。タブが2〜3個の場合は他のナビゲーション方法を検討してください。

Related Components: 関連コンポーネント

Tabs

References: 参考文献

Accordion Icons: Which Signifiers Work Best?The caret icon most clearly indicated to users that it would open an accordion in place, rather than linking directly to a new page.www.nngroup.com

Change log: 変更履歴

DateChanges
2024/11/29ドキュメントを公開
小さな気づきや違和感があれば、お気軽に教えてください。
フィードバック
Chat illustration
前へ次へ