Tabs

Ne zaman kullanılır

Tabs, aynı bağlamın eş düzeydeki bölümleri arasında geçiş içindir: bir detay sayfasının bölümleri, bir raporun türleri, bir ayar ekranının alt başlıkları. Kullanıcı bir anda tek bölüme bakar.

Ne zaman kullanılmaz

• Sayfalar arasında gezinmek için: Adres değişiyorsa kenar çubuğu (AppShell) ya da Link kullanın.
• Aynı veriyi süzmek ya da görünümünü değiştirmek için: Panel değişmiyorsa SegmentedControl kullanın.
• Bölümleri birlikte karşılaştırmak gerekiyorsa: İçeriği alt alta gösterin ya da Accordion kullanın.
• Sıralı adımlar için: Adım sırası önemliyse Stepper kullanın.

Anatomi

Genel bakışEtkinlikAyarlar

Genel bakış içeriği burada yer alır.

AçıkKoyu

Kodu kopyala

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

export default function Default() {
  return (
    <Tabs defaultValue="overview">
      <TabList label="Bölümler">
        <Tab value="overview">Genel bakış</Tab>
        <Tab value="activity">Etkinlik</Tab>
        <Tab value="settings">Ayarlar</Tab>
      </TabList>
      <TabPanel value="overview">Genel bakış içeriği burada yer alır.</TabPanel>
      <TabPanel value="activity">Etkinlik içeriği burada yer alır.</TabPanel>
      <TabPanel value="settings">Ayarlar içeriği burada yer alır.</TabPanel>
    </Tabs>
  );
}

1. Sekme listesi (TabList): tablist rolü ve zorunlu label adı; line görünümde kenarlık taşımaz, yalnız seçili sekmenin altında gösterge vardır.
2. Sekme (Tab): Etiket, isteğe bağlı ikon ve sayı; size ile 32 ya da 36 px.
3. Gösterge: Seçili sekmeyi izleyen çizgi (line) ya da yükseltilmiş dolgu (contained).
4. Panel (TabPanel): Seçili sekmenin içeriği; odaklanabilir.

Davranış

• Tıklama ya da Enter, Space sekmeyi seçer. Ok tuşları sekmeler arasında gezer; varsayılan activation="automatic" odaklanan sekmeyi hemen seçer.
• Panel geç çiziliyorsa activation="manual" kullanın: ok tuşları yalnızca odağı taşır.
• Gösterge seçili sekmeye spring.productive-base yayıyla kayar; panel yumuşakça belirir. Hareketi azaltma tercihinde gösterge anında yer değiştirir.
• Sekmeler kapsayıcıdan genişse liste yatay kayar; odaklanan sekme görünür alana kaydırılır.
• Gizli paneller DOM’dan çıkar. Form girdisi gibi durumu korumak için keepMounted verin.

Yönergeler

• Sekme etiketlerini kısa ve eş düzeyde tutun; bir ya da iki kelime.
• Bir sayfada tek bir düzey sekme kullanın; sekme içinde sekme açmayın.
• 2 ile 7 arasında sekme kullanın. Daha fazlası için gezinmeyi yeniden düşünün.
• Sayfa bölümleri için line, kart içindeki kısa seçimler için contained kullanın.
• Devre dışı sekmenin nedenini yakında açıklayın; aksi halde sekmeyi göstermeyin.

İçerik

• Etiketler ad öbeğidir; fiil kullanmayın ve nokta koymayın.
• Sayı (badge) yalnızca kullanıcının dikkat etmesi gereken öğeleri sayar.

Türkçe	İngilizce
Genel bakış	Overview
Etkinlik	Activity
Ayarlar	Settings
Üyeler	Members

Cam

Provider material="glass" altında contained rayı cama döner, göstergesi daha yüksek kontrastlı tonu alır. line sekmelerin yüzeyi yoktur, hiçbir zaman cam olmaz. material="solid" onu opak tutar.

İlgili bileşenler

• SegmentedControl: Aynı içeriğin görünümünü değiştirir.
• Accordion: Bölümleri alt alta açıp kapatır.
• ToggleGroup: Bir ayarın değerlerinden birini seçer.