タブ

タブは、コンテンツを複数のセクションに整理し、ユーザーがセクション間を移動できるようにします。

インストール

npx nextui-cli@latest add tabs

上記のコマンドは個別インストール専用です。 @nextui-org/react がグローバルにインストール済みの場合は、このステップをスキップできます。

インポート

NextUI は、タブ関連のコンポーネントを2つエクスポートします。

• Tabs: タブリストを表示するためのメインコンポーネント。
• Tab: タブアイテムを表示するためのコンポーネント。このコンポーネントの子要素は、タブのコンテンツとして表示されます。

使い方

動的

items プロパティを使用することで、タブを動的にレンダリングできます。

無効

無効な項目

サイズ

半径

色

バリアント

アイコン付き

制御付き

選択されたタブを制御するには、onSelectionChange および selectedKey プロパティを使用できます。

配置

placement プロパティを使用して、タブの位置を変更できます。デフォルト値は top です。

垂直

タブの向きを変更すると、値が true の場合、placement プロパティが無効になります。

リンク

タブアイテムは、href プロパティを Tab コンポーネントに渡すことでリンクとしてレンダリングできます。 デフォルトでは、リンクはネイティブブラウザナビゲーションを実行します。 ただし、通常は、選択されたタブをクライアントサイドルーターからの現在のURLと同期させたいでしょう。 これは、次の手順で実行できます。

1. アプリのルートでルーターをセットアップします。 これを行う方法については、ルーティングガイドを参照してください。
2. 現在のURLに基づいて選択されたタブを設定するには、selectedKey プロパティを使用します。

Next.js

この例では、Next.js App Router を使用して、各タブのルートを設定し、選択されたタブを現在のURLと同期させています。

// app/tabs/page.tsx
"use client";

import {usePathname} from "next/navigation";

function ExampleClientRouterWithTabs() {
  const pathname = usePathname();

  return (
    <Tabs aria-label="Options" selectedKey={pathname}>
      <Tab key="photos" title="Photos" href="/photos">
        <Card>
          <CardBody>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </CardBody>
        </Card>
      </Tab>
      <Tab key="music" title="Music" href="/music">
        <Card>
          <CardBody>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
            dolore eu fugiat nulla pariatur.
          </CardBody>
        </Card>
      </Tab>
      <Tab key="videos" title="Videos" href="/videos">
        <Card>
          <CardBody>
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.
          </CardBody>
        </Card>
      </Tab>
    </Tabs>
  );
}

React Router

この例では、React Router を使用して、各タブのルートを設定し、選択をURLと同期させています。

import {Route, Routes, useLocation} from "react-router-dom";
import {Tabs, Tab} from "@nextui-org/react";

function AppTabs() {
  const {pathname} = useLocation();

  return (
    <div className="flex flex-col gap-2">
      <Tabs selectedKey={pathname} aria-label="Tabs">
        <Tab id="/" href="/" title="Home" />
        <Tab id="/photos" href="/photos" title="Photos" />
        <Tab id="/music" href="/music" title="Music" />
        <Tab id="/videos" href="/videos" title="Videos" />
      </Tabs>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/photos" element={<PhotosPage />} />
        <Route path="/music" element={<MusicPage />} />
        <Route path="/videos" element={<VideosPage />} />
      </Routes>
    </div>
  );
}

注意: フレームワークのルーターを設定する方法については、ルーティングガイドを参照してください。

フォーム付き

スロット

• base: メインタブスロットで、アイテムとパネルをラップします。
• tabList: タブリストスロットで、タブアイテムをラップします。
• tab: タブスロットで、タブアイテムをラップします。
• tabContent: タブコンテンツスロットで、タブコンテンツをラップします。
• cursor: カーソルスロットで、カーソルをラップします。これは、disableAnimation=false の場合にのみ表示されます。
• panel: パネルスロットで、タブパネル（コンテンツ）をラップします。

カスタムスタイル

コンポーネントスロットにカスタムTailwind CSSクラスを渡すことで、Tabsコンポーネントをカスタマイズできます。

データ属性

Tab は、base 要素に以下の属性を持ちます。

• data-selected: タブが選択されている場合。
• data-disabled: タブが無効になっている場合。
• data-hover: タブがホバーされている場合。useHoverに基づきます。
• data-hover-selected: タブがホバーされており、かつ選択されていない場合。useHoverとselectedステートに基づきます。
• data-focus: タブがフォーカスされている場合。useFocusRingに基づきます。
• data-focus-visible: タブがキーボードでフォーカスされている場合。useFocusRingに基づきます。
• data-pressed: タブが押されている場合。usePressに基づきます。

アクセシビリティ

• タブ上でのマウス、タッチ、キーボード操作のサポート。
• 矢印キーのキーボードイベントのサポート。
• 無効化されたタブのサポート。
• タブのARIAパターンに従い、タブとその関連するタブパネルを意味的にリンクします。
• フォーカス可能な子要素がないタブパネルのフォーカス管理。

API

Tabs のProps

タブイベント

タブのプロパティ

モーションプロパティ

export type MotionProps = HTMLMotionProps<"div">; // @see https://www.framer.com/motion/