ガイドライン
Segmented Control
セグメントコントロールは同じカテゴリの中から1つのオプションを選択するために使用するコンポーネントです。
Anatomy: 解剖図
Container
| Item | Name | Description | Component | Optional |
| 1 | Container | セグメントコントロールの外枠要素 | ||
| 2 | Unit | 各セグメントアイテム |
Button
| Item | Name | Description | Component | Optional |
| 1 | Container | セグメントの外枠要素 | ||
| 2 | Icon | セグメントアイテムのアイコン要素 | Icon | ✅ |
| 3 | Label | セグメントアイテムのラベル |
Options: 選択肢
Size
sm
通常よりも小さなサイズです。限られたスペースに配置に使用します。
md (default)
デフォルトのサイズです。他のサイズはデフォルトを基準に重要度に応じて使用します。
Units
2-5 units
2から5個のセグメントを設定可能です。セグメント数が5を超える場合は他のコンポーネント（例：タブ）の使用を検討してください。
States: 状態
Default
Enable
ユーザーがボタンを操作する前のデフォルトの状態。
Hover
ユーザーがボタンにマウスオーバーしている状態。
Disabled
システムによって非活性化されている状態。ユーザーによる操作は不能です。
Focus
ユーザーがタッチ操作や、キーボードや音声による操作を用いてボタンに注視している状態。
Selected
Enable
選択された状態
Hover
ユーザーがボタンにマウスオーバーしている状態。
Disabled
システムによって非活性化されている状態。ユーザーによる操作は不能です。
Focus
ユーザーがタッチ操作や、キーボードや音声による操作を用いてボタンに注視している状態。
Behaviors: 振る舞い
最小幅
セグメントの最小幅はセグメントの高さの2倍の値です。最小幅が存在することで、ユーザーが適切に視認することをサポートします。
セグメントの切り替え
セグメントをクリックすると、そのセグメントが選択状態になります。同時に関連するコンテンツが表示されます。
一度に 1 つのセグメントのみが選択可能です。
Metrics: 寸法
sm
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Container Height: 32px
- Padding: 1px
- Item spacing: 2px
md
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Container Height: 42px
- Padding: 1px
- Item spacing: 2px
Usage: 使い方
同等の重要度を持ち、関連する2-5個のオプションの切り替えに使用してください。
アイコンと組み合わせることで、視覚的な理解を補助することができます。
Contents: 内容
最も重要または頻繁に使用されるタブを左側に配置してください。
セグメントのラベルに長文や複雑な表現を使用しないでください。簡潔で明確な表現を使用してください。可能な限り 1〜2 単語で表現してください。句読点や装飾的な記号は使用しないでください。
Change log: 変更履歴
| Date | Changes |
|---|---|
| 2025/06/27 | ドキュメントを公開 |
