Tabs

Компонент для переключения между связанными панелями на одной странице.

Содержимое вкладки 1

import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs";

export default function Particle() {
  return (
    <Tabs defaultValue="tab-1">
      <TabsList>
        <TabsTab value="tab-1">Вкладка 1</TabsTab>
        <TabsTab value="tab-2">Вкладка 2</TabsTab>
        <TabsTab value="tab-3">Вкладка 3</TabsTab>
      </TabsList>
      <TabsPanel value="tab-1">
        <p className="p-4 text-center text-muted-foreground text-xs">
          Содержимое вкладки 1
        </p>
      </TabsPanel>
      <TabsPanel value="tab-2">
        <p className="p-4 text-center text-muted-foreground text-xs">
          Содержимое вкладки 2
        </p>
      </TabsPanel>
      <TabsPanel value="tab-3">
        <p className="p-4 text-center text-muted-foreground text-xs">
          Содержимое вкладки 3
        </p>
      </TabsPanel>
    </Tabs>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/tabs

Использование

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

<Tabs defaultValue="tab-1">
  <TabsList>
    <TabsTab value="tab-1">Tab 1</TabsTab>
    <TabsTab value="tab-2">Tab 2</TabsTab>
    <TabsTab value="tab-3">Tab 3</TabsTab>
  </TabsList>
  <TabsPanel value="tab-1">Tab 1 content</TabsPanel>
  <TabsPanel value="tab-2">Tab 2 content</TabsPanel>
  <TabsPanel value="tab-3">Tab 3 content</TabsPanel>
</Tabs>

API

Tabs

Корневой компонент. Стилизованная обёртка над Tabs.Root из Base UI.

Свойство	Тип	По умолчанию	Описание
`variant`	`"default" \| "underline"`	`"default"`	Управляет стилизацией вкладок

TabsList

Контейнер для триггеров вкладок. Стилизованная обёртка над Tabs.List из Base UI.

TabsTab

Отдельный триггер вкладки. Стилизованная обёртка над Tabs.Tab из Base UI.

TabsPanel

Панель содержимого для каждой вкладки. Стилизованная обёртка над Tabs.Panel из Base UI.

TabsIndicator

Визуальный индикатор активной вкладки. Стилизованная обёртка над Tabs.Indicator из Base UI.

Примеры

Вариант с подчёркиванием

Содержимое вкладки 1

import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs";

export default function Particle() {
  return (
    <Tabs defaultValue="tab-1">
      <div className="border-b">
        <TabsList variant="underline">
          <TabsTab value="tab-1">Вкладка 1</TabsTab>
          <TabsTab value="tab-2">Вкладка 2</TabsTab>
          <TabsTab value="tab-3">Вкладка 3</TabsTab>
        </TabsList>
      </div>
      <TabsPanel value="tab-1">
        <p className="p-4 text-center text-muted-foreground text-xs">
          Содержимое вкладки 1
        </p>
      </TabsPanel>
      <TabsPanel value="tab-2">
        <p className="p-4 text-center text-muted-foreground text-xs">
          Содержимое вкладки 2
        </p>
      </TabsPanel>
      <TabsPanel value="tab-3">
        <p className="p-4 text-center text-muted-foreground text-xs">
          Содержимое вкладки 3
        </p>
      </TabsPanel>
    </Tabs>
  );
}

Вертикальная ориентация

Содержимое вкладки 1

import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs";

export default function Particle() {
  return (
    <Tabs className="w-full" defaultValue="tab-1" orientation="vertical">
      <TabsList>
        <TabsTab value="tab-1">Вкладка 1</TabsTab>
        <TabsTab value="tab-2">Вкладка 2</TabsTab>
        <TabsTab value="tab-3">Вкладка 3</TabsTab>
      </TabsList>
      <TabsPanel value="tab-1">
        <p className="p-4 text-center text-muted-foreground text-xs">
          Содержимое вкладки 1
        </p>
      </TabsPanel>
      <TabsPanel value="tab-2">
        <p className="p-4 text-center text-muted-foreground text-xs">
          Содержимое вкладки 2
        </p>
      </TabsPanel>
      <TabsPanel value="tab-3">
        <p className="p-4 text-center text-muted-foreground text-xs">
          Содержимое вкладки 3
        </p>
      </TabsPanel>
    </Tabs>
  );
}

Подчёркивание с вертикальной ориентацией

Содержимое вкладки 1

import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs";

export default function Particle() {
  return (
    <Tabs
      className="w-full flex-row"
      defaultValue="tab-1"
      orientation="vertical"
    >
      <div className="border-s">
        <TabsList variant="underline">
          <TabsTab value="tab-1">Вкладка 1</TabsTab>
          <TabsTab value="tab-2">Вкладка 2</TabsTab>
          <TabsTab value="tab-3">Вкладка 3</TabsTab>
        </TabsList>
      </div>
      <TabsPanel value="tab-1">
        <p className="p-4 text-center text-muted-foreground text-xs">
          Содержимое вкладки 1
        </p>
      </TabsPanel>
      <TabsPanel value="tab-2">
        <p className="p-4 text-center text-muted-foreground text-xs">
          Содержимое вкладки 2
        </p>
      </TabsPanel>
      <TabsPanel value="tab-3">
        <p className="p-4 text-center text-muted-foreground text-xs">
          Содержимое вкладки 3
        </p>
      </TabsPanel>
    </Tabs>
  );
}

На этой странице

Установка Использование API Tabs TabsList TabsTab TabsPanel TabsIndicator Примеры Вариант с подчёркиванием Вертикальная ориентация Подчёркивание с вертикальной ориентацией