Bileşenler

Tabs

Aynı bağlamın panelleri arasında geçiş yapan, hareketli göstergeli sekmeler.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz. Sekmeler arasında geçerken göstergenin yaya bağlı hareketine bakın.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Tabs, line görünümde, 32 px yükseklikte ve 14 px etiketle gelir. Seçili sekmenin altındaki gösterge, yeni sekmeye kayarak geçer; panel yumuşakça belirir.

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

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>
  );
}

Kapsayıcılı görünüm

variant="contained" seçili sekmeyi katman zemini üstünde yükseltilmiş bir dolguyla gösterir. Kart içindeki kısa görünüm seçimleri içindir.

Etkinlik içeriği burada yer alır.

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

export default function Contained() {
  return (
    <Tabs variant="contained" defaultValue="week">
      <TabList label="Görünüm">
        <Tab value="day">Günlük</Tab>
        <Tab value="week">Haftalık</Tab>
        <Tab value="month">Aylık</Tab>
      </TabList>
      <TabPanel value="day">Genel bakış içeriği burada yer alır.</TabPanel>
      <TabPanel value="week">Etkinlik içeriği burada yer alır.</TabPanel>
      <TabPanel value="month">Ayarlar içeriği burada yer alır.</TabPanel>
    </Tabs>
  );
}

İkon, sayı ve devre dışı

icon etiketten önce süs ikonu koyar; badge etiketten sonra sayı gösterir ve sekmenin adına katılır. disabled sekmeyi seçilemez yapar. size="md" (varsayılan) 36 px yükseklik verir.

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

export default function IconsAndBadges() {
  return (
    <Tabs defaultValue="overview" size="md">
      <TabList label="Bölümler">
        <Tab value="overview" icon="home">
          Genel bakış
        </Tab>
        <Tab value="activity" icon="bell" badge={3}>
          Etkinlik
        </Tab>
        <Tab value="settings" icon="settings" disabled>
          Ayarlar
        </Tab>
      </TabList>
    </Tabs>
  );
}

Dikey

orientation="vertical" listeyi panelin yanına alır; ok tuşları yukarı ve aşağı çalışır.

Etkinlik içeriği burada yer alır.

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

export default function Vertical() {
  return (
    <Tabs orientation="vertical" defaultValue="activity">
      <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>
  );
}

Açık ve koyu mod

Renkler color-line-*, color-fg-* ve color-surface-* token’larından gelir; iki modda ayrı ayar gerekmez.

Etkinlik içeriği burada yer alır.

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

export default function Contained() {
  return (
    <Tabs variant="contained" defaultValue="week">
      <TabList label="Görünüm">
        <Tab value="day">Günlük</Tab>
        <Tab value="week">Haftalık</Tab>
        <Tab value="month">Aylık</Tab>
      </TabList>
      <TabPanel value="day">Genel bakış içeriği burada yer alır.</TabPanel>
      <TabPanel value="week">Etkinlik içeriği burada yer alır.</TabPanel>
      <TabPanel value="month">Ayarlar içeriği burada yer alır.</TabPanel>
    </Tabs>
  );
}