Segmented Control

SegmentedControlは、関連する選択肢をグループ化し、1つを選択することで表示内容や状態を切り替えるコンポーネントです。

プロパティ

SegmentedControlは、以下のプロパティをサポートしています。

名前	型	説明
`segmentedControls`	`SegmentedControlItem[]`	セグメント項目の配列を渡します。
`value`	`number \| string`	現在選択されているセグメントのValueを指します。
`onChange`	`(segmentedControl: SegmentedControlItem) => void`	選択されたときのコールバック関数。
`startContent`	`Snippet<[SegmentedControlItem]>`	左側に配置するコンテンツ

SegmentedControlItemは、セグメント内の情報を表すオブジェクトです。

名前	型	デフォルト値	説明
`id`	`number \| string`		セグメント項目のidです。
`label`	`string`		セグメントの項目名です。
`disabled`	`boolean`	`false`	セグメントを無効化します。操作できません。
`value`	`boolean`		現在選択されているセグメントのValueを指します。

以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。
パスは実際のプロジェクトの構成にあわせて更新してください。

特に操作が行われていない、デフォルトの状態です。

Valueを指定することで、任意のセグメントを選択状態にすることも可能です。

コールバック関数で値を受け取ることができます。

Snippetも渡すことができます。

利用不可の状態です。