nili/ui
enfaartr
Tüm bileşenler

Tabs

Genel görünüm
19 export6 varyant ekseni32 prop4 dosya
import { Tabs, TabsContent, TabsDivider, TabsList, TabsTrigger } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Yatay

Varsayılan. label sekme kümesini adlandırır — o olmadan ekran okuyucu yalnızca “sekme listesi” der ki üç tanesinin olduğu bir sayfada bu işe yaramaz.

Adınız, fotoğrafınız ve biyografiniz.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@nili/ui"

export function Example() {
  return (
    <Tabs defaultValue="profile">
      <TabsList label={t('settings.label')}>
        <TabsTrigger value="profile">{t('tab.profile')}</TabsTrigger>
        <TabsTrigger value="security">{t('tab.security')}</TabsTrigger>
        <TabsTrigger value="alerts">{t('tab.alerts')}</TabsTrigger>
      </TabsList>

      <TabsContent value="profile">Your name, photo and bio.</TabsContent>
      <TabsContent value="security">Password and two-factor.</TabsContent>
      <TabsContent value="alerts">What we email you about.</TabsContent>
    </Tabs>
  )
}

Simgeler ve rozetler

startIcon ve endIcon mantıksaldır, iki yönde de önde gider. badge her düğümü alır — çıplak bir sayı ya da tam bir Badge.

Adınız, fotoğrafınız ve biyografiniz.

import { Tabs, TabsList, TabsTrigger, TabsContent, Badge, Icon } from "@nili/ui"
import { RiUser3Line, RiNotification3Line } from "@remixicon/react"

export function Example() {
  return (
    <Tabs defaultValue="profile">
      <TabsList label="Account settings">
        <TabsTrigger value="profile" startIcon={<Icon icon={RiUser3Line} />}>
          {t('tab.profile')}
        </TabsTrigger>
        <TabsTrigger
          value="alerts"
          startIcon={<Icon icon={RiNotification3Line} />}
          badge={<Badge size="small" color="red">3</Badge>}
        >
          {t('tab.alerts')}
        </TabsTrigger>
      </TabsList>
      …
    </Tabs>
  )
}

Genişleme

stretch sekmelerin etiketlerine yapışmak yerine genişliği paylaşmasını sağlar — bir kartın ya da mobil sayfanın içindeki bölümlü denetim için doğrudur.

Son yedi gün.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@nili/ui"

export function Example() {
  return (
    <Tabs defaultValue="week">
      <TabsList stretch label={t('range.label')}>
        <TabsTrigger value="day">{t('range.day')}</TabsTrigger>
        <TabsTrigger value="week">{t('range.week')}</TabsTrigger>
        <TabsTrigger value="month">{t('range.month')}</TabsTrigger>
      </TabsList>
      …
    </Tabs>
  )
}

Dikey

appearance yalnızca dikey sekmelere uygulanır — yatay menünün tasarımda stil ekseni yoktur. TabsDivider bir sekme grubunu çizgiyle ayırır.

card

Adınız, fotoğrafınız ve biyografiniz.

list

Adınız, fotoğrafınız ve biyografiniz.

import { Tabs, TabsList, TabsTrigger, TabsContent, TabsDivider } from "@nili/ui"

export function Example() {
  return (
    <Tabs defaultValue="profile" orientation="vertical" appearance="card">
      <TabsList label="Settings">
        <TabsTrigger value="profile">{t('tab.profile')}</TabsTrigger>
        <TabsTrigger value="security">{t('tab.security')}</TabsTrigger>
        <TabsDivider />
        <TabsTrigger value="usage">Usage</TabsTrigger>
      </TabsList>
      …
    </Tabs>
  )
}

Etkinleştirme kipi ve keepMounted

automatic odak ulaştığı anda sekmeyi seçer — ARIA varsayılanı; paneller ucuzken doğrudur. Bir sekme veri yüklüyorsa manual kullanın: dört sekmenin yanından ok tuşuyla geçmek dört istek tetiklememeli. keepMounted gizli bir panelde kaydırma konumunu ve form durumunu korur.

Sekmeler arasında ok tuşlarıyla gezin — `manual` ile Enter ya da Boşluk’a basana dek hiçbir şey değişmez.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@nili/ui"

export function Example() {
  return (
    <Tabs defaultValue="overview" activationMode="manual">
      <TabsList label={t('report.label')}>
        <TabsTrigger value="overview">{t('report.overview')}</TabsTrigger>
        <TabsTrigger value="chart">{t('report.chart')}</TabsTrigger>
      </TabsList>

      <TabsContent value="overview">Cheap to render.</TabsContent>

      {/* expensive to rebuild — keep it mounted */}
      <TabsContent value="chart" keepMounted>
        <RevenueChart />
      </TabsContent>
    </Tabs>
  )
}