SegmentedControl
特定のオブジェクトの異なる状態を切り替えて表示するためのコンポーネントです。オブジェクトの持つ情報を別の見方へ変更するときに使います。
特定のオブジェクトに対して異なる状態を切り替える具体例としては、以下が挙げられます。
- 組織図オブジェクトを「組織図表示」「従業員名簿表示」でビューを切り替える
- 書類グループオブジェクトを「書類一覧」「従業員一覧」でビューを切り替える
使用上の注意
オブジェクト自体を切り替える場合はTabBarを使用する
SegmentedControlは、ビューに存在するオブジェクト自体を切り替える場合には適していません。
オブジェクト自体を切り替えて表示する場合は、TabBarを使ってください。
オン・オフを切り替える場合にはSwitchを使用する
SegmentedControlは異なる状態を切り替えるためのコンポーネントですが、オンとオフの2つの状態を切り替えるときはSwitchを使ってください。
選択とは別に適用操作を行なう場合はRadioButtonを使用する
「複数の選択肢から1つを選ぶ」という振る舞いはRadioButtonと似ていますが、SegmentedControlは操作すると即座にビューに対して影響が発生することが特徴です。
選択操作後に、送信や保存などのボタンを押して入力内容を適用する場合は、RadioButtonを使ってください。
Props
options必須
Option[]
選択肢の配列
value
string
選択中の値
onClickOption
(value: string) => void
選択肢を押下したときに発火するコールバック関数
size
"s" "default"
各ボタンの大きさ
isSquare
false true
各ボタンを正方形にするかどうか。アイコンボタンを使用する場合に指定します。
className
string
コンポーネントに適用するクラス名