概要

<SegmentedControl.Root defaultValue="inbox">
  <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
  <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
  <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
</SegmentedControl.Root>

APIリファレンス

このコンポーネントは、トグルグループプリミティブからプロパティと機能を継承しています。共通マージンプロパティをサポートしています。

ルート

コントロールのアイテムを含みます。

プロパティ	型	デフォルト
`size`	`Responsive<"1" \| "2" \| "3">`	`"2"`
`variant`	`"surface" \| "classic"`	`"surface"`
`radius`	`"none" \| "small" \| "medium" \| "large" \| "full"`	デフォルト値なし

アイテム

コントロールの個々の値を表します。

例

サイズ

sizeプロパティを使用して、コントロールのサイズを制御します。

<Flex align="start" direction="column" gap="4">
  <SegmentedControl.Root defaultValue="inbox" size="1">
    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="inbox" size="2">
    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="inbox" size="3">
    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
  </SegmentedControl.Root>
</Flex>

バリアント

variantプロパティを使用して、コントロールの視覚スタイルを制御します。

<Flex align="start" direction="column" gap="4">
  <SegmentedControl.Root defaultValue="inbox" variant="surface">
    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="inbox" variant="classic">
    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
  </SegmentedControl.Root>
</Flex>

半径

radiusプロパティを使用して、特定の半径値を割り当てます。

<Flex align="start" direction="column" gap="4">
  <SegmentedControl.Root defaultValue="inbox" radius="none">
    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="inbox" radius="small">
    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="inbox" radius="medium">
    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="inbox" radius="large">
    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="inbox" radius="full">
    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
  </SegmentedControl.Root>
</Flex>

前へスクロール領域

次へセレクト

GitHubでこのページを編集する。