SegmentedControl

Birkaç görünüm, aralık ya da mod arasında geçiş için hap biçiminde tekli seçim kontrolü. Bir radio grubu gibi davranır: tek Tab durağı, gezinmek için ok tuşları.

KararlıKaynak kod

<SegmentedControl
aria-label="Zaman aralığı"
defaultValue="week"
options={[
  { value: "day", label: "Gün" },
  { value: "week", label: "Hafta" },
  { value: "month", label: "Ay" },
]}
/>

Import

tsx

import { SegmentedControl, type SegmentedControlOption } from "@merid/react";

Örnekler

Controlled

Uncontrolled kullanımda kontrol defaultValue ile ya da ilk etkin seçenekle başlar. Controlled kullanım için value ve onValueChange ver.

value: month

const [value, setValue] = useState("month");

<SegmentedControl aria-label="Zaman aralığı" options={range} value={value} onValueChange={setValue} />

İkonlu segment'ler

Bir segment'in label değeri ikon olduğunda seçeneğe bir ariaLabel ver.

<SegmentedControl
aria-label="Görünüm"
options={[
  { value: "list", label: <ListIcon />, ariaLabel: "Liste görünümü" },
  { value: "grid", label: <GridIcon />, ariaLabel: "Grid görünümü" },
]}
/>

Devre dışı seçenekler, devre dışı kontrol, tam genişlik

<SegmentedControl
aria-label="Paket"
options={[
  { value: "monthly", label: "Aylık" },
  { value: "yearly", label: "Yıllık" },
  { value: "lifetime", label: "Ömür boyu", disabled: true },
]}
/>
<SegmentedControl aria-label="Zaman aralığı" options={range} disabled />
<SegmentedControl aria-label="Zaman aralığı" options={range} fullWidth />

API referansı

SegmentedControl

Ref ve diğer div attribute'ları role="radiogroup" kapsayıcısına gider.

Prop	Tip	Varsayılan	Açıklama
`options`Zorunlu	`SegmentedControlOption[]`	–	Segment'ler.
`value`	`string`	–	Seçili değer (controlled).
`defaultValue`	`string`	–	Başlangıçta seçili değer (uncontrolled). Varsayılanı ilk etkin seçenektir.
`onValueChange`	`(value: string) => void`	–	Seçim değiştiğinde yeni değerle çağrılır.
`fullWidth`	`boolean`	`false`	Segment'leri kapsayıcıyı dolduracak şekilde genişletir.
`disabled`	`boolean`	`false`	Kontrolün tamamını devre dışı bırakır.

SegmentedControlOption

Prop	Tip	Varsayılan	Açıklama
`value`Zorunlu	`string`	–	Seçildiğinde bildirilen değer.
`label`Zorunlu	`ReactNode`	–	Segment'in görünür içeriği.
`ariaLabel`	`string`	–	Etiket metin değilse (örneğin bir ikon) erişilebilir ad.
`disabled`	`boolean`	–	Segment'i seçilemez yapar; ok tuşları onu atlar.

Stil verme

Seçici	Değerler
`.mrd-segmented`	Hap biçimli kanal; genişletildiğinde `data-full-width`
`.mrd-segmented__item`	Her bir segment <button role="radio">
`data-state`	Her item'da `on` · `off`

Tray section ya da tray kart üzerinde kanal otomatik olarak --mrd-tray-2 rengine geçer. Component değişkeni yoktur.

Erişilebilirlik

Kapsayıcı role="radiogroup", her segment ise aria-checked ile role="radio" olur. Gruba aria-label ya da aria-labelledby ile ad ver.
Tab sırasında yalnızca seçili segment bulunur. Ok tuşları focus'u taşır ve aynı anda seçer (APG radio group); devre dışı segment'leri atlar, uçlarda başa ya da sona döner.

Tuş	Ne yapar
`Tab`	Focus'u seçili segment'e taşır.
`→↓`	Sonraki etkin segment'i seçer.
`←↑`	Önceki etkin segment'i seçer.
`Home`	İlk etkin segment'i seçer.
`End`	Son etkin segment'i seçer.

Kullanım ilkeleri

Yap

Görünümü yerinde değiştiren, iki ile beş arası kısa ve paralel etiket kullan: Gün / Hafta / Ay.

Kaçın

Sayfalar arası gezinme için ya da kendi içeriği olan paneller için kullanmak. O bir Tabs işi.

İlgili sayfalar

Tabs: içerik panelleri arasında geçiş.
Radio: uzun etiketli ya da açıklamalı tekli seçim.
Switch: tek bir açık/kapalı ayarı.