Tabs

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { Tabs } from '@bigbang/ui';

Kaynak

Tabs.tsx

Storybook

Tabs · Playground

Tabs dört parçadan oluşur ve hepsi @bigbang/ui paketindedir: Tabs, TabList, Tab, TabPanel.

import { Tab, TabList, TabPanel, Tabs } from '@bigbang/ui';

<Tabs defaultValue="overview">
  <TabList label="Hesap bölümleri">
    <Tab value="overview">Genel bakış</Tab>
    <Tab value="activity" badge={3}>Etkinlik</Tab>
  </TabList>
  <TabPanel value="overview">…</TabPanel>
  <TabPanel value="activity">…</TabPanel>
</Tabs>;

Özellikler

Tabs

value

Açıklama

Kontrollü kullanımda seçili sekmenin değeri. onValueChange ile birlikte verin.

Tür

string

defaultValue

Açıklama

Kontrolsüz kullanımda ilk çizimde seçili sekmenin değeri. Verilmezse ilk etkin sekme seçilir.

Tür

string

onValueChange

Açıklama

Yeni seçilen sekmenin değeriyle çağrılır.

Tür

(value: string) => void

variant

Açıklama

line seçili sekmenin altını çizer ve sayfa bölümleri içindir; contained seçili sekmeyi gömük bir zemin üstünde yükseltilmiş bir dolguyla gösterir ve kart içi kompakt görünümler içindir.

Tür

'line' | 'contained'

Varsayılan

'line'

size

Açıklama

Satır yüksekliği: 32 ya da 36 px. contained görünümde zemin bu yüksekliktedir, içindeki sekmeler 4 px daha kısadır.

Tür

'sm' | 'md'

Varsayılan

'md'

activation

Açıklama

automatic ok tuşlarıyla odaklanan sekmeyi hemen seçer. manual yalnızca odağı taşır, Enter ya da Space ile seçer; panel geç çiziliyorsa kullanın.

Tür

'automatic' | 'manual'

Varsayılan

'automatic'

orientation

Açıklama

Sekme listesinin ve sekmeler arasında gezdiren ok tuşlarının yönü. Dikey sekmeler panellerinin yanında durur.

Tür

'horizontal' | 'vertical'

Varsayılan

'horizontal'

material

Açıklama

'solid', cam bir Provider altında contained rayını opak tutar. line varyantının yüzeyi yoktur, hiçbir zaman cam olmaz.

Tür

'auto' | 'solid'

Varsayılan

'auto'

className

Açıklama

Yalnızca yerleşim için: dış boşluk ve konum.

Tür

string

childrenZorunlu

Açıklama

Bir TabList ve her sekme için bir TabPanel.

Tür

ReactNode

TabList

labelZorunlu

Açıklama

Ekran okuyucu için sekme listesinin adı, örneğin "Hesap bölümleri". Zorunludur: bir sayfada birden çok sekme listesi olabilir.

Tür

string

className

Açıklama

Yalnızca yerleşim için: dış boşluk ve konum.

Tür

string

childrenZorunlu

Açıklama

Tab bileşenleri.

Tür

ReactNode

Tab

valueZorunlu

Açıklama

Sekmeyi aynı value değerini taşıyan TabPanel'e bağlar.

Tür

string

childrenZorunlu

Açıklama

Görünür etiket. Bir ya da iki kelime tutun.

Tür

ReactNode

icon

Açıklama

Etiketten önce gösterilen kayıtlı ikon adı. Süstür; sekmeyi etiket adlandırır.

Tür

IconName

badge

Açıklama

Etiketten sonra gösterilen sayı, örneğin okunmamış öğeler. Sekme adının parçası olarak okunur.

Tür

number

disabled

Açıklama

Sekmeyi devre dışı bırakır. Ok tuşları yine ulaşır (aria-disabled), böylece ekran okuyucu kullanıcısı varlığını öğrenir; ama seçilemez.

Tür

boolean

Varsayılan

false

className

Açıklama

Yalnızca yerleşim için.

Tür

string

TabPanel

valueZorunlu

Açıklama

Bu paneli gösteren Tab'ın değeri.

Tür

string

keepMounted

Açıklama

Panel gizliyken de DOM'da kalır; kaydırma ya da form girdisi gibi durumu sekme değişince korunur.

Tür

boolean

Varsayılan

false

className

Açıklama

Yalnızca yerleşim için.

Tür

string

childrenZorunlu

Açıklama

Panel içeriği.

Tür

ReactNode

Veri öznitelikleri

• data-component: tabs, tab-list, tab, tabs-indicator, tab-panel.
• data-variant kök öğede; data-orientation her parçada.
• data-active seçili sekmede, data-disabled devre dışı sekmede (Base UI).
• data-activation-direction sekmede: göstergenin geldiği yön (left, right, up, down).