TabBar

ユーザーの関心が近いものを並列化し、ビューを切り替えるためのコンポーネントです。

使用上の注意

同じオブジェクトの異なる状態を切り替えて表示する目的に使用しない

TabBarは異なるオブジェクトやビューを切り替えるために使用してください。同じオブジェクトについて異なる状態を切り替えたい場合はSegmentedControlの使用を検討してください。

下線なし（bordered=false）のTabBarは非推奨

タブとして操作できるか認知がしにくく、ビューへの影響範囲が不明瞭なため、下線なしのTabBarは非推奨です。

下線によって影響範囲を明示する

TabBarは、下線によって影響するビューの範囲を明示して使用してください。

下線が他のコンポーネントと競合する場合、最低限TabBarItemがある範囲までは下線が必要です。

レイアウト

IconやBadgeの有無

TabBarItem内にIconやBadgeを追加することでタブそのものやタブ内のビューに関する情報を補足できます。具体例は以下の通りです。

• タブ内のビューで選択しているオブジェクトの数をBadgeで示す
• タブ内のビューでエラーが発生していることをIconで示す
  • Iconはデフォルトではテキスト情報を持たないため、視覚情報と同等の情報を代替テキストなどを使って提供してください

Props