KvalityUI

Tabs

Вкладки. Два вида списка — с подложкой и линией.

Живой код — редактируйте
<Tabs defaultValue="leads" className="w-full max-w-md">
  <TabsList>
    <TabsTrigger value="leads">Заявки</TabsTrigger>
    <TabsTrigger value="calls">Звонки</TabsTrigger>
    <TabsTrigger value="visitors">Посетители</TabsTrigger>
  </TabsList>
  <TabsContent value="leads" className="text-14-regular text-fg-secondary">
    128 заявок за неделю
  </TabsContent>
  <TabsContent value="calls" className="text-14-regular text-fg-secondary">
    42 звонка
  </TabsContent>
  <TabsContent value="visitors" className="text-14-regular text-fg-secondary">
    3 512 посетителей
  </TabsContent>
</Tabs>

Линия

Живой код — редактируйте
<Tabs defaultValue="general">
  <TabsList variant="line">
    <TabsTrigger value="general">Основное</TabsTrigger>
    <TabsTrigger value="notifications">Уведомления</TabsTrigger>
    <TabsTrigger value="team">Команда</TabsTrigger>
  </TabsList>
</Tabs>

Пропсы TabsList

Prop

Type

Также принимает стандартные атрибуты TabsListPropsHTMLAttributes

On this page