SegmentedControl

Ne zaman kullanılır

SegmentedControl, aynı içeriğin iki ile beş görünümü ya da süzgeci arasında tek seçim içindir: günlük, haftalık, aylık; liste ya da ızgara. Seçim hemen uygulanır ve içerik aynı yerde değişir.

Ne zaman kullanılmaz

• Farklı paneller arasında geçiş için: Panel değişiyorsa Tabs kullanın.
• Açık ya da kapalı kalan ayarlar için: Toggle ya da ToggleGroup kullanın.
• Beşten çok seçenek için: Select kullanın.
• Form içinde onay gerektiren seçimler için: Radyo düğmeleri kullanın.

Anatomi

GünlükHaftalıkAylık

AçıkKoyu

Kodu kopyala

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

const items = [
  { value: 'day', label: 'Günlük' },
  { value: 'week', label: 'Haftalık' },
  { value: 'month', label: 'Aylık' },
];

export default function Default() {
  return (
    <SegmentedControl label="Dönem" items={items} defaultValue="week" />
  );
}

1. İz: Katman zemini; radiogroup rolü ve zorunlu label adı.
2. Dolgu: Seçili seçeneğin altında kayan yükseltilmiş yüzey; süstür.
3. Seçenek: radio rolünde etiket ve isteğe bağlı ikon.

Davranış

• Tıklama ya da Space seçeneği seçer. Ok tuşları bir sonraki seçeneğe gider ve onu seçer; devre dışı seçenekleri atlar, sonda başa döner.
• Grubun tek sekme durağı vardır; Tab seçili seçeneğe gelir.
• Dolgu yeni seçeneğe yaya bağlı kayar; ilk çizimde kaymadan yerinde belirir. Hareketi azaltma tercihinde anında yer değiştirir.
• Basılı seçenek hafifçe küçülür ve bırakınca geri döner.
• name verilirse değer formla gönderilir.

Yönergeler

• İki ile beş seçenek kullanın; dar ekranlarda üçü geçmeyin.
• Etiketleri kısa ve eş uzunlukta tutun.
• Her zaman bir seçenek seçili olsun; defaultValue ya da value verin.
• Sayfanın ana gezinmesi için kullanmayın.

İçerik

• Etiketler bir ya da iki kelimelik ad ya da sıfattır.
• label neyin seçildiğini söyler: “Dönem”, “Görünüm”.

Türkçe	İngilizce
Günlük	Daily
Haftalık	Weekly
Aylık	Monthly
Liste	List
Izgara	Grid

Cam

Provider material="glass" altında ray cama döner, seçili parça daha yüksek kontrastlı tonu alır. material="solid" onu opak tutar.

İlgili bileşenler

• Tabs: Panel değiştiren seçim.
• ToggleGroup: Bir ya da birden çok ayar basılı kalır.
• Toggle: Tek bir açık ya da kapalı ayar.