Tabs (タブ)

Tabs コンポーネントは、同じ情報を異なるビューに体系化、同様または関連のあるデータセット間の切り替えが可能です。Tabs は、Ignite UI for Angular Tabs コンポーネントと視覚的に同じものです。

Tabs のデモ

サイズ

Tabs には 2 つのサイズがあります。Short はデフォルトでテキストのみを表示し、オプションでプレフィックスアイコンとサフィックスアイコンを表示できます。Tall はさらに、テキストの上に 3 つ目のアイコンを追加できます。

レスポンシブ

Tabs は、幅を調整することで使用可能な水平方向のスペースを埋めるために Content Fit にすることも、スクロールボタンを使用して多数のタブ項目をナビゲートすることで固定することもできます。これにより、同じ合計スペースで他のモードで通常可能なコンテンツよりも多くのコンテンツを入れることができます。

Tabs の量

ほとんどのケースでは、Tabs に 2 つ ~ 5 つの項目を含める必要があります。Figma で項目を削除するには、ネストされた Tab 項目コンポーネントをレイヤーパネルから非表示にするだけで、追加された自動レイアウトによってコンテンツが適切に調整されます。Sketch で同じことを行うには、項目のオーバーライドを ~No Symbol に設定すると、スマートレイアウトによって残りの項目が調整されます。Adobe XD で同じことを実行するには、不要な項目を削除し、Stack は残りの項目を配置します。ユースケースで 5 つ以上のタブが必要な場合、上記で説明した Fixed モードを検討してください。

短いバーコンテンツ

Short Bar にはデフォルトでテキストコンテンツが含まれます。 Figma では、ネストされたすべての Tab Item を選択し、プロパティパネルから「Label」、「Prefix Icon」、および「Suffix Icon」をオン/オフすることで、ラベルと 2 つのアイコンを表示/非表示にすることができます。 Sketch では、代わりにアイコンを表示する場合は、マテリアルアイコンを 🔣 Icon オーバーライドに割り当て、バーのすべてのタブで 🏷️ Label を ~No Symbol に設定する必要があります。Adobe XD で同様の結果を得るには、🔣 Icon または 🏷️ Label レイヤーが存在し、表示されていることと、バーのすべてのタブでもう 1 つが削除されていることを確認してください。

タブ項目の状態

タブ項目は、Active、Inactive、および Disabled の状態をサポートします。Figma では、プロパティパネルから「State」プロパティを使用して切り替えることができます。Sketch ではこれを Symbol Overrides で実現していますが、Adobe XD では Component States パラダイムを使用して簡単に状態を切り替えることができます。Tabs には、常に 1 つのアクティブなタブと、任意の数の非アクティブおよび無効なタブがあります。

スタイル設定

Tabs は、テキストとアイコンの色、現在の選択をマークするインジケーターの色、およびアクティブ/インアクティブな背景色に使用できるオプションを通じて、基本的なスタイルの柔軟性を提供します。

使用方法

Tabs は情報の体系化に適してますが、ワークフローのデザインやロジカルシーケンスに基づいた操作には向いていません (チェックアウトプロセスや構成ウィザード)。短い Tabs を使用してアイコンタブとテキストタブを同じメニューで組み合わせることはできません。2 つのコンテンツモードのうち 1 つを選択し、バーのすべての項目に継続して使用します。

良い例	悪い例