Tabs

アクティブなタブへスライドするインジケーターでビューを切り替えます。セグメントコントロールまたはアンダーラインとして使え、あふれたリストはスクロールします。

Overview

Visitors are up 12% this week, mostly from search.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function TabsDemo() {
  return (
    <Tabs defaultValue="overview" className="w-full max-w-md">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="analytics">Analytics</TabsTrigger>
        <TabsTrigger value="reports">Reports</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">
        <div className="rounded-xl border p-4 text-sm">
          <p className="font-medium">Overview</p>
          <p className="text-muted-foreground">
            Visitors are up 12% this week, mostly from search.
          </p>
        </div>
      </TabsContent>
      <TabsContent value="analytics">
        <div className="rounded-xl border p-4 text-sm">
          <p className="font-medium">Analytics</p>
          <p className="text-muted-foreground">
            Average session length is 4m 12s across 18,240 visits.
          </p>
        </div>
      </TabsContent>
      <TabsContent value="reports">
        <div className="rounded-xl border p-4 text-sm">
          <p className="font-medium">Reports</p>
          <p className="text-muted-foreground">
            Three scheduled reports go out on Monday.
          </p>
        </div>
      </TabsContent>
    </Tabs>
  )
}

インストール

pnpm dlx shadcn@latest add https://hextaui.com/r/tabs.json

コンポーネント、HextaUIのテーマトークン、依存するHextaUIコンポーネントを追加します。

まだ追加していない場合は、グローバルCSSにテーマトークンを追加してください。
2
依存関係をインストールします。
```
pnpm add @base-ui/react class-variance-authority cn
```
3
次のコードをコピーしてプロジェクトに貼り付けてください。
components/ui/tabs.tsx
"use client" import * as React from "react" import { Tabs as TabsPrimitive } from "@base-ui/react/tabs" import { cva } from "class-variance-authority" import { cn } from "cn" type ClassName<State> =
インポートパスは、お使いのプロジェクト構成に合わせて更新してください。

使い方

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">…</TabsContent>
  <TabsContent value="analytics">…</TabsContent>
</Tabs>

1つのインジケーターがアクティブなタブへスライドしてそのサイズに合わせ、コンテンツは即座に切り替わるため、頻繁な切り替えがアニメーションを待つことはありません。インジケーターはページのハイドレーション前に配置されるので、読み込み時にジャンプして現れることはありません。

コンポジション

Tabs
├── TabsList
│   └── TabsTrigger
└── TabsContent

例

下線

TabsList の variant="line" は、pill の代わりに下線をスライドさせます。

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

const tabs = ["Activity", "Pull requests", "Issues", "Settings"]

export function TabsLine() {
  return (
    <Tabs defaultValue="Activity" className="w-full max-w-md">
      <TabsList variant="line">
        {tabs.map((tab) => (
          <TabsTrigger key={tab} value={tab}>
            {tab}
          </TabsTrigger>
        ))}
      </TabsList>
      {tabs.map((tab) => (
        <TabsContent key={tab} value={tab}>
          <p className="py-2 text-sm text-muted-foreground">
            {tab} for this repository.
          </p>
        </TabsContent>
      ))}
    </Tabs>
  )
}

多数のタブ

タブが収まらないときは、リストが横にスクロールし、まだ見えるものがある端をフェードして、アクティブまたはフォーカスされたタブを表示位置までスクロールします。

import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
]

export function TabsOverflow() {
  return (
    <Tabs defaultValue="September" className="w-full max-w-sm">
      <TabsList variant="line">
        {months.map((month) => (
          <TabsTrigger key={month} value={month}>
            {month}
          </TabsTrigger>
        ))}
      </TabsList>
    </Tabs>
  )
}

多数のタブ(セグメント型)

pill スタイルも同じようにスクロールし、選択したタブを表示したまま、トラックを保ちます。

import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

const categories = [
  "All",
  "Design",
  "Engineering",
  "Marketing",
  "Sales",
  "Support",
  "Finance",
  "Legal",
  "Operations",
]

export function TabsOverflowSegmented() {
  return (
    <Tabs defaultValue="Finance" className="w-full max-w-xs">
      <TabsList>
        {categories.map((category) => (
          <TabsTrigger key={category} value={category}>
            {category}
          </TabsTrigger>
        ))}
      </TabsList>
    </Tabs>
  )
}

アイコンとカウント

トリガーの内側にアイコンやバッジを置きます。

import { IconCode, IconGitPullRequest, IconMessage } from "@tabler/icons-react"

import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function TabsIcons() {
  return (
    <Tabs defaultValue="code">
      <TabsList variant="line">
        <TabsTrigger value="code">
          <IconCode />
          Code
        </TabsTrigger>
        <TabsTrigger value="pulls">
          <IconGitPullRequest />
          Pull requests
          <Badge>12</Badge>
        </TabsTrigger>
        <TabsTrigger value="discussions">
          <IconMessage />
          Discussions
        </TabsTrigger>
      </TabsList>
    </Tabs>
  )
}

垂直

orientation="vertical" はタブを縦に積み、下線は側面に移ります。

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

const sections = [
  { value: "general", label: "General", text: "Name, avatar and language." },
  { value: "security", label: "Security", text: "Password and two-factor." },
  { value: "billing", label: "Billing", text: "Plan, invoices and payment." },
]

export function TabsVertical() {
  return (
    <Tabs
      defaultValue="general"
      orientation="vertical"
      className="w-full max-w-md"
    >
      <TabsList variant="line">
        {sections.map((section) => (
          <TabsTrigger key={section.value} value={section.value}>
            {section.label}
          </TabsTrigger>
        ))}
      </TabsList>
      {sections.map((section) => (
        <TabsContent key={section.value} value={section.value}>
          <div className="flex flex-col gap-1 py-2 text-sm">
            <p className="font-medium">{section.label}</p>
            <p className="text-muted-foreground">{section.text}</p>
          </div>
        </TabsContent>
      ))}
    </Tabs>
  )
}

無効

無効なタブはキーボードでスキップされます。

import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function TabsDisabled() {
  return (
    <Tabs defaultValue="day">
      <TabsList>
        <TabsTrigger value="day">Day</TabsTrigger>
        <TabsTrigger value="week">Week</TabsTrigger>
        <TabsTrigger value="month" disabled>
          Month
        </TabsTrigger>
      </TabsList>
    </Tabs>
  )
}

制御

value と onValueChange を渡します。外部からの変更でもインジケーターがスライドします。

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

const steps = ["Cart", "Shipping", "Payment", "Review"]

export function TabsControlled() {
  const [step, setStep] = React.useState("Cart")
  const index = steps.indexOf(step)

  return (
    <div className="flex flex-col items-start gap-4">
      <Tabs value={step} onValueChange={(value) => setStep(String(value))}>
        <TabsList>
          {steps.map((item) => (
            <TabsTrigger key={item} value={item}>
              {item}
            </TabsTrigger>
          ))}
        </TabsList>
      </Tabs>
      <Button
        size="sm"
        variant="outline"
        onClick={() => setStep(steps[(index + 1) % steps.length])}
      >
        Next step
      </Button>
    </div>
  )
}

右から左

タブ、矢印キー、インジケーターは文字の読み方向に従います。

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function TabsRtl() {
  return (
    <div dir="rtl" className="w-full max-w-sm">
      <Tabs defaultValue="account">
        <TabsList variant="line">
          <TabsTrigger value="account">الحساب</TabsTrigger>
          <TabsTrigger value="password">كلمة المرور</TabsTrigger>
          <TabsTrigger value="alerts">التنبيهات</TabsTrigger>
        </TabsList>
        <TabsContent value="account">
          <p className="py-2 text-sm text-muted-foreground">إعدادات الحساب.</p>
        </TabsContent>
        <TabsContent value="password">
          <p className="py-2 text-sm text-muted-foreground">
            غيّر كلمة المرور.
          </p>
        </TabsContent>
        <TabsContent value="alerts">
          <p className="py-2 text-sm text-muted-foreground">إدارة التنبيهات.</p>
        </TabsContent>
      </Tabs>
    </div>
  )
}

キーボード

キー	アクション
`Tab`	リスト内のアクティブなタブに移動し、次にパネルへ移動します。
`←→`	タブ間を移動します。端で循環します。縦向きでは ↑ と ↓。
`HomeEnd`	最初または最後のタブに移動します。
`EnterSpace`	フォーカスされているタブを開きます。フォーカスの移動に合わせてタブを開くには、TabsList に activateOnFocus を設定します。

アクセシビリティ

リストは tablist で、各トリガーは対応する tabpanel を制御する tab です。
パネルはフォーカス可能なので、リンクやボタンのないコンテンツにもキーボードユーザーが到達できます。
視差効果の軽減が有効な場合、インジケーターはスライドせずジャンプします。

APIリファレンス

Tabs

プロパティ	型	デフォルト
`value`	`any`	`–`
`defaultValue`	`any`	`0`
`onValueChange`	`(value, details) => void`	`–`
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`

属性	説明
`data-activation-direction`	"left"、"right"、"up"、"down"。古いタブから見た新しいタブの位置。

TabsList

プロパティ	型	デフォルト
`variant`	`"default" \| "line"`	`"default"`
`activateOnFocus`	`boolean`	`false`
`loopFocus`	`boolean`	`true`

属性	説明
`data-slot="tabs-indicator"`	スライドする pill または下線。
`data-scrolled-start / data-scrolled-end`	リストがその方向にスクロールできるときに付きます。
`--active-tab-left / --active-tab-width`	アクティブなタブの位置とサイズ。-top と -height もあります。

TabsTrigger

プロパティ	型	デフォルト
`value`	`any`	`–`
`disabled`	`boolean`	`false`
`render`	`ReactElement \| (props, state) => ReactElement`	`<button>`

属性	説明
`data-active`	開いているタブ。
`data-disabled`	そのタブは無効です。

TabsContent

プロパティ	型	デフォルト
`value`	`any`	`–`
`keepMounted`非表示の間も、パネルを DOM に残します。	`boolean`	`false`

使用しているブロック

Tabs の上に構築されるブロック。

Artifactモデルが作成したものを表示する、AIチャットの横のパネルです。Webページ、SVG、ドキュメント、コードがリアルタイムでストリーミングされ、その後サンドボックス化されたプレビューに切り替わります。比較して復元できるバージョン、サイズを変更できる分割、スマートフォンでのボトムシートを備えています。