Tabs

表示を切り替えるタブ。

同じ場所に複数の内容を出し分けます。ボタン 2〜4 個で切り替えるだけなら SegmentedControl の方が場所を取りません。

export const client = "only";

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <div className="flex w-[28rem] flex-col gap-8">
      <Tabs defaultValue="chart">
        <TabsList>
          <TabsTrigger value="chart">グラフ</TabsTrigger>
          <TabsTrigger value="table">表</TabsTrigger>
          <TabsTrigger value="sql">SQL</TabsTrigger>
        </TabsList>
        <TabsContent value="chart">月次の推移をグラフで表示します。</TabsContent>
        <TabsContent value="table">同じデータを表で表示します。</TabsContent>
        <TabsContent value="sql">この画面が発行しているクエリです。</TabsContent>
      </Tabs>

      <Tabs defaultValue="day">
        <TabsList variant="line">
          <TabsTrigger value="day">日次</TabsTrigger>
          <TabsTrigger value="week">週次</TabsTrigger>
          <TabsTrigger value="month">月次</TabsTrigger>
        </TabsList>
        <TabsContent value="day">variant="line" の見た目です。</TabsContent>
        <TabsContent value="week">下線だけのタブ。</TabsContent>
        <TabsContent value="month">画面の幅いっぱいに置くときに向きます。</TabsContent>
      </Tabs>
    </div>
  );
}

import { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants } from "@squadbase/vantage/ui";

パーツ

パーツ	役割
`Tabs`	状態。`value` / `defaultValue` / `onValueChange`、`orientation`
`TabsList`	タブの帯。`variant`: `default`（塗り）\| `line`（下線）
`TabsTrigger`	タブ 1 つ。`value` は必須
`TabsContent`	対応する中身

URL に状態を残したい場合は、value を検索パラメータと結び付けてください（ルーティングを参照）。

orientation="vertical" にすると縦並びになります。