タブ

一度に1つずつ表示される、コンテンツの階層化されたセクション（タブパネルとして知られる）のセット。

ここでアカウントを変更できます。完了したら保存をクリックしてください。

名前

ユーザー名

import React from 'react';
import * as Tabs from '@radix-ui/react-tabs';
import './styles.css';

const TabsDemo = () => (
  <Tabs.Root className="TabsRoot" defaultValue="tab1">
    <Tabs.List className="TabsList" aria-label="Manage your account">
      <Tabs.Trigger className="TabsTrigger" value="tab1">
        Account
      </Tabs.Trigger>
      <Tabs.Trigger className="TabsTrigger" value="tab2">
        Password
      </Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content className="TabsContent" value="tab1">
      <p className="Text">Make changes to your account here. Click save when you're done.</p>
      <fieldset className="Fieldset">
        <label className="Label" htmlFor="name">
          Name
        </label>
        <input className="Input" id="name" defaultValue="Pedro Duarte" />
      </fieldset>
      <fieldset className="Fieldset">
        <label className="Label" htmlFor="username">
          Username
        </label>
        <input className="Input" id="username" defaultValue="@peduarte" />
      </fieldset>
      <div style={{ display: 'flex', marginTop: 20, justifyContent: 'flex-end' }}>
        <button className="Button green">Save changes</button>
      </div>
    </Tabs.Content>
    <Tabs.Content className="TabsContent" value="tab2">
      <p className="Text">Change your password here. After saving, you'll be logged out.</p>
      <fieldset className="Fieldset">
        <label className="Label" htmlFor="currentPassword">
          Current password
        </label>
        <input className="Input" id="currentPassword" type="password" />
      </fieldset>
      <fieldset className="Fieldset">
        <label className="Label" htmlFor="newPassword">
          New password
        </label>
        <input className="Input" id="newPassword" type="password" />
      </fieldset>
      <fieldset className="Fieldset">
        <label className="Label" htmlFor="confirmPassword">
          Confirm password
        </label>
        <input className="Input" id="confirmPassword" type="password" />
      </fieldset>
      <div style={{ display: 'flex', marginTop: 20, justifyContent: 'flex-end' }}>
        <button className="Button green">Change password</button>
      </div>
    </Tabs.Content>
  </Tabs.Root>
);

export default TabsDemo;

機能

制御付きまたは制御なしにできます。

水平/垂直方向をサポートします。

自動/手動のアクティベーションをサポートします。

完全なキーボードナビゲーション。

インストール

コマンドラインからコンポーネントをインストールします。

npm install @radix-ui/react-tabs

構成

すべてのパーツをインポートし、それらを組み合わせます。

import * as Tabs from '@radix-ui/react-tabs';

export default () => (
  <Tabs.Root>
    <Tabs.List>
      <Tabs.Trigger />
    </Tabs.List>
    <Tabs.Content />
  </Tabs.Root>
);

API リファレンス

ルート

タブコンポーネントのすべての部分を含みます。

プロパティ	型	デフォルト
`asChild`	`ブール値`	`false`
`defaultValue`	`文字列`	デフォルト値なし
`value`	`文字列`	デフォルト値なし
`onValueChange`	`関数`	デフォルト値なし
`orientation`	`列挙型`	`"horizontal"`
`dir`	`列挙型`	デフォルト値なし
`activationMode`	`列挙型`	`"automatic"`

データ属性	値
`[data-orientation]`	`"vertical" \|"horizontal"`

トリガー

関連付けられたコンテンツをアクティブにするボタン。

プロパティ	型	デフォルト
`asChild`	`ブール値`	`false`
`value*`	`文字列`	デフォルト値なし
`disabled`	`ブール値`	`false`

データ属性	値
`[data-state]`	`"active" \|"inactive"`
`[data-disabled]`	無効の場合に存在します
`[data-orientation]`	`"vertical" \|"horizontal"`

コンテンツ

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

プロパティ	型	デフォルト
`asChild`	`ブール値`	`false`
`value*`	`文字列`	デフォルト値なし
`forceMount`	`ブール値`	デフォルト値なし

データ属性	値
`[data-state]`	`"active" \|"inactive"`
`[data-orientation]`	`"vertical" \|"horizontal"`

例

垂直

orientation プロパティを使用すると、垂直タブを作成できます。

import * as Tabs from '@radix-ui/react-tabs';

export default () => (
  <Tabs.Root defaultValue="tab1" orientation="vertical">
    <Tabs.List aria-label="tabs example">
      <Tabs.Trigger value="tab1">One</Tabs.Trigger>
      <Tabs.Trigger value="tab2">Two</Tabs.Trigger>
      <Tabs.Trigger value="tab3">Three</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="tab1">Tab one content</Tabs.Content>
    <Tabs.Content value="tab2">Tab two content</Tabs.Content>
    <Tabs.Content value="tab3">Tab three content</Tabs.Content>
  </Tabs.Root>
);

アクセシビリティ

キーボード操作

キー	説明
`Tab`
`ArrowDown`	`orientation` に応じて、次のトリガーにフォーカスを移動します。また、関連付けられたコンテンツをアクティブにします。
`ArrowRight`	`orientation` に応じて、次のトリガーにフォーカスを移動します。また、関連付けられたコンテンツをアクティブにします。
`ArrowUp`	`orientation` に応じて、前のトリガーにフォーカスを移動します。また、関連付けられたコンテンツをアクティブにします。
`ArrowLeft`	`orientation` に応じて、前のトリガーにフォーカスを移動します。また、関連付けられたコンテンツをアクティブにします。
`Home`	最初のトリガーにフォーカスを移動し、関連付けられたコンテンツをアクティブにします。
`End`	最後のトリガーにフォーカスを移動し、関連付けられたコンテンツをアクティブにします。

概要

ガイド

コンポーネント

ユーティリティ

タブ

機能