ガイドライン
Anatomy: 解剖図
| Item | Name | Description | Component | Optional |
| 1 | Container | タブアイテムを水平に配置するコンテナ要素 | ||
| 2 | Tab Item | タブの個別のアイテム要素 | ||
| 3 | Label | タブの内容を示すテキスト要素 |
Options: 選択肢
Variant
Line
デフォルトのスタイルです。選択されたタブの下部に線が表示されます。コンテンツエリアとの境界が明確な場合に使用します。
Solid
選択されたタブが塗りつぶされます。コンテンツエリアとの境界が不明確な場合に使用します。
Ghost
最も軽量なスタイルです。選択されたタブはテキストの色のみが変化します。他の UI エレメントを邪魔したくない場合に使用します。
States: 状態
Default
Enable
ユーザーがタブを操作する前のデフォルトの状態。
Hover
ユーザーがタブにマウスオーバーしている状態。
Focus
ユーザーがタッチ操作や、キーボードや音声による操作を用いてタブに注視している状態。
Disabled
システムによってチェックボックスが非活性化されている状態。ユーザーによる操作は不能です。
Selected
Enable
タブが選択されていることを表す状態。
Hover
ユーザーがタブにマウスオーバーしている場合かつ、タブが選択されている場合の状態です。
Focus
タブがフォーカスされている場合かつ、タブが選択されている場合の状態です。
Disabled
タブが非活性化されている場合かつ、タブが選択されている場合の状態です。
Behaviors: 振る舞い
タブの切り替え
タブをクリックすると、そのタブが選択状態になります。同時に関連するコンテンツが表示されます。
一度に 1 つのタブのみが選択可能です。
レスポンシブ対応
タブの幅はコンテンツに応じて自動的に調整されます。画面幅が狭い場合、タブは横スクロール可能になります。
タブのラベルは 1 行に収まるように調整してください。
Metrics: 寸法
Tabs
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Container Height: 32px
- Item Spacing: 8px
Tab Item
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Container Height: 40px
- Padding Vertical: 8px
- Padding Horizontal: 10px
Contents: 内容
最も重要または頻繁に使用されるタブを左側に配置してください。
論理的な順序（時系列、プロセスの流れなど）に従って配置してくださいタブの順序は一貫性を保ち、頻繁な変更は避けてください。
タブのラベルに長文や複雑な表現を使用しないでください。簡潔で明確な表現を使用してください。可能な限り 1〜2 単語で表現してください。句読点や装飾的な記号は使用しないでください。
Usage: 使い方
Ghostタイプのタブを使用する場合、選択状態と非選択状態の視認性を確保するために、背景色を付与してください。
Ghostタイプのタブを使用する場合、タブ内外で同じ色を使用すると、タブの状態が一部のユーザーにとって視認しづらくなる可能性があります。他のコンポーネントの利用を検討してください。
Change log: 変更履歴
| Date | Changes |
|---|---|
| 2025/4/4 | 初版を公開 |
