Tabs

Birbiriyle ilişkili paneller arasında geçiş için çizgi tab'lar.

Bu hafta üç deploy yapıldı, hepsi sağlıklı.

import { Tabs } from "@merid/react";

export function Example() {
  return (
    <Tabs.Root defaultValue="overview">
      <Tabs.List aria-label="Proje">
        <Tabs.Trigger value="overview">Genel bakış</Tabs.Trigger>
        <Tabs.Trigger value="activity">Aktivite</Tabs.Trigger>
        <Tabs.Trigger value="settings">Ayarlar</Tabs.Trigger>
        <Tabs.Trigger value="billing" disabled>
          Faturalandırma
        </Tabs.Trigger>
      </Tabs.List>
      <Tabs.Panel value="overview">Bu hafta üç deploy yapıldı, hepsi sağlıklı.</Tabs.Panel>
      <Tabs.Panel value="activity">Northwind 4 pull request merge etti.</Tabs.Panel>
      <Tabs.Panel value="settings">Projeyi yeniden adlandır ya da bölgesini değiştir.</Tabs.Panel>
    </Tabs.Root>
  );
}

Import

tsx

import { Tabs } from "@merid/react";

Anatomi

tsx

<Tabs.Root>
  <Tabs.List>
    <Tabs.Trigger value="a" />
  </Tabs.List>
  <Tabs.Panel value="a" />
</Tabs.Root>

Root seçili değeri ve yönü tutar.
List, role="tablist" elemanıdır; ona bir aria-label ver.
Trigger, tek bir role="tab" butonudur; paneline value ile bağlanır.
Panel, role="tabpanel" elemanıdır. forceMount verilmedikçe aktif olmayan paneller unmount edilir.

Örnekler

Controlled

Haftalık veriler gösteriliyor.

const RANGE_LABELS = { day: "Günlük", week: "Haftalık", month: "Aylık" };
const [tab, setTab] = useState("week");

<Tabs.Root value={tab} onValueChange={setTab}>
  <Tabs.List aria-label="Zaman aralığı">
    <Tabs.Trigger value="day">Gün</Tabs.Trigger>
    <Tabs.Trigger value="week">Hafta</Tabs.Trigger>
    <Tabs.Trigger value="month">Ay</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Panel value={tab}>{RANGE_LABELS[tab]} veriler gösteriliyor.</Tabs.Panel>
</Tabs.Root>

Dikey

orientation="vertical" verildiğinde liste alt alta dizilir; tab'lar arasında ArrowUp/ArrowDown ile gezilir.

Ad, avatar ve saat dilimi.

<Tabs.Root defaultValue="profile" orientation="vertical">
  <Tabs.List aria-label="Hesap">
    <Tabs.Trigger value="profile">Profil</Tabs.Trigger>
    <Tabs.Trigger value="security">Güvenlik</Tabs.Trigger>
    <Tabs.Trigger value="notifications">Bildirimler</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Panel value="profile">Ad, avatar ve saat dilimi.</Tabs.Panel>
  <Tabs.Panel value="security">Şifre ve iki adımlı doğrulama.</Tabs.Panel>
  <Tabs.Panel value="notifications">E-posta ve uygulama içi bildirimler.</Tabs.Panel>
</Tabs.Root>

API referansı

Root

defaultValue ve onChange dışındaki tüm <div> attribute'larını kabul eder.

Prop	Tip	Varsayılan	Açıklama
`value`	`string`	–	Controlled seçili tab değeri.
`defaultValue`	`string`	`""`	Uncontrolled kullanımda başlangıçta seçili tab.
`onValueChange`	`(value: string) => void`	–	Seçili tab değiştiğinde çağrılır.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Ok tuşlarının çalıştığı eksen.
`ref`	`Ref<HTMLDivElement>`	–	Kök elemana iletilen ref.

List

Tüm <div> attribute'larını kabul eder.

Prop	Tip	Varsayılan	Açıklama
`variant`	`"line"`	`"line"`	Görsel stil. Şimdilik yalnızca "line".
`ref`	`Ref<HTMLDivElement>`	–	Tablist'e iletilen ref.

Trigger

value dışındaki tüm <button> attribute'larını kabul eder.

Prop	Tip	Varsayılan	Açıklama
`value`Zorunlu	`string`	–	Bu tab'ı ve panelini tanımlayan değer.
`disabled`	`boolean`	–	Tab'ı devre dışı bırakır; ok tuşları onu atlar.
`ref`	`Ref<HTMLButtonElement>`	–	Tab butonuna iletilen ref.

Panel

Tüm <div> attribute'larını kabul eder.

Prop	Tip	Varsayılan	Açıklama
`value`Zorunlu	`string`	–	Bu panelin ait olduğu tab'ın değeri.
`forceMount`	`boolean`	`false`	Panel aktif değilken de (gizli olarak) DOM'da kalır.
`ref`	`Ref<HTMLDivElement>`	–	Panele iletilen ref.

Stil verme

Sınıf	Eleman
`.mrd-tabs`	Root
`.mrd-tabs__list`	List
`.mrd-tabs__trigger`	Trigger
`.mrd-tabs__panel`	Panel

Attribute	Nerede	Değerler
`data-orientation`	Root	`horizontal`, `vertical`
`data-variant`	List	`line`
`data-state`	Trigger, Panel	`active`, `inactive`
`data-disabled`	Trigger	devre dışıyken bulunur
`aria-selected="true"`	Trigger	seçili tab (accent alt çizgiyle gösterilir)

WAI-ARIA Tabs desenini otomatik aktivasyonla izler: focus'u taşımak tab'ı da seçer. Tab sırasında yalnızca seçili tab bulunur; panelin kendisi focus alabilir, böylece içinde etkileşimli eleman olmayan içeriğe de klavyeyle ulaşılır.

Tuş	Ne yapar
`Tab`	Focus'u tab listesine (seçili tab'a), ardından panele taşır.
`ArrowRight`	Yatayda: sonraki tab, sondan başa döner. Tab'ı seçer.
`ArrowLeft`	Yatayda: önceki tab, baştan sona döner. Tab'ı seçer.
`ArrowDown`	Dikeyde: sonraki tab, sondan başa döner. Tab'ı seçer.
`ArrowUp`	Dikeyde: önceki tab, baştan sona döner. Tab'ı seçer.
`Home`	İlk tab.
`End`	Son tab.

Kullanım ilkeleri

Yap

Tab'ları aynı nesnenin eş düzeydeki görünümleri için, bir iki kelimelik kısa etiketlerle kullan.

Kaçın

Tab'ları sıralı adımlar için kullanmak (bunun için Stepper var) ya da küçük bir kontrol modunu değiştirmek için kullanmak (bu bir SegmentedControl işi).

Yap

Tab satırını tek satırda tut; nadir kullanılan görünümleri bir menüye taşı.