タブ

一度に1つずつ表示されるコンテンツセクションのセット。

ソースコードを表示問題を報告 Playgroundで表示

アカウントに変更を加えます。

<Tabs.Root defaultValue="account">
  <Tabs.List>
    <Tabs.Trigger value="account">Account</Tabs.Trigger>
    <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
    <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
  </Tabs.List>

  <Box pt="3">
    <Tabs.Content value="account">
      <Text size="2">Make changes to your account.</Text>
    </Tabs.Content>

    <Tabs.Content value="documents">
      <Text size="2">Access and update your documents.</Text>
    </Tabs.Content>

    <Tabs.Content value="settings">
      <Text size="2">Edit your profile or update contact information.</Text>
    </Tabs.Content>
  </Box>
</Tabs.Root>

APIリファレンス

このコンポーネントは、Tabsプリミティブからpropsを継承し、共通のマージンpropsをサポートしています。

ルート

すべてのコンポーネントパーツを含みます。

Prop	型	デフォルト
`asChild`	`boolean`	デフォルト値なし

Prop	型	デフォルト
`size`	`Responsive<"1" \| "2">`	`"2"`
`wrap`	`Responsive<"nowrap" \| "wrap" \| "wrap-reverse">`	デフォルト値なし
`justify`	`Responsive<"start" \| "center" \| "end">`	デフォルト値なし
`color`	`enum`	デフォルト値なし
`highContrast`	`boolean`	デフォルト値なし

トリガー

関連するコンテンツをアクティブにするボタン。

コンテンツ

各トリガーに関連付けられたコンテンツを含みます。

例

サイズ

タブリストのサイズを制御するには、size propを使用します。

<Flex direction="column" gap="4" pb="2">
  <Tabs.Root defaultValue="account">
    <Tabs.List size="1">
      <Tabs.Trigger value="account">Account</Tabs.Trigger>
      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>

  <Tabs.Root defaultValue="account">
    <Tabs.List size="2">
      <Tabs.Trigger value="account">Account</Tabs.Trigger>
      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>
</Flex>

カラー

タブリストに特定の色を割り当てるには、color propを使用します。

<Flex direction="column" gap="4" pb="2">
  <Tabs.Root defaultValue="account">
    <Tabs.List color="indigo">
      <Tabs.Trigger value="account">Account</Tabs.Trigger>
      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>

  <Tabs.Root defaultValue="account">
    <Tabs.List color="cyan">
      <Tabs.Trigger value="account">Account</Tabs.Trigger>
      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>

  <Tabs.Root defaultValue="account">
    <Tabs.List color="orange">
      <Tabs.Trigger value="account">Account</Tabs.Trigger>
      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>

  <Tabs.Root defaultValue="account">
    <Tabs.List color="crimson">
      <Tabs.Trigger value="account">Account</Tabs.Trigger>
      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>
</Flex>

ハイコントラスト

背景とのカラーコントラストを高めるには、highContrast propを使用します。

<Flex direction="column" gap="4" pb="2">
  <Tabs.Root defaultValue="account">
    <Tabs.List color="gray">
      <Tabs.Trigger value="account">Account</Tabs.Trigger>
      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>

  <Tabs.Root defaultValue="account">
    <Tabs.List color="gray" highContrast>
      <Tabs.Trigger value="account">Account</Tabs.Trigger>
      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>
</Flex>

タブはページナビゲーションに使用しないでください。代わりに、この目的のために設計され、同等のスタイルを持つTab Navを使用してください。

前へテーブル

次へタブナビ

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

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

タブ