Tabs

Alt çizgi, kapsül ve kart stillerine sahip sekmeli içerik navigasyonu.

Tabs.tsx

Alt Çizgili (Underline)

Hap Görünümü (Pill / Segment)

Kartlı Sekmeler (Card Tabs)

Kurulum

shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:

$npx shadcn@latest add https://ui.cagriozay.com.tr/r/tabs.json

Kullanım Örneği

import { Tabs } from "@/components/ui/Tabs"

<Tabs
  ariaLabel="Proje bölümleri"
  activeTab={activeTab}
  onChange={setActiveTab}
  tabs={[
    { id: "overview", label: "Genel", panelId: "overview-panel" },
    { id: "activity", label: "Aktivite", panelId: "activity-panel" },
  ]}
/>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
tabs	TabItem[]	—	Kimlik, etiket, sayaç, disabled durum ve panel bağlantısı içeren sekmeler.
activeTab	string	—	Kontrollü aktif sekme kimliği.
onChange	(id: string) => void	—	Farklı bir sekme seçildiğinde çağrılır.
variant	"underline" \| "pill" \| "card" \| "segment"	"underline"	Sekme listesinin görsel sunumu.
size	"sm" \| "md" \| "lg"	"md"	Sekme boyutu.
fullWidth	boolean	false	Sekmeleri mevcut genişliğe eşit yayar.
ariaLabel	string	"Sekmeler"	Sekme listesinin erişilebilir adı.
activationMode	"automatic" \| "manual"	"automatic"	Odak hareketinde otomatik veya tuşla manuel seçim modeli.