ToggleGroup

İki durumlu butonlar (aria-pressed). Açık kalan tek bir seçenek için Toggle, bir set için ToggleGroup kullan: type="single" geri alınabilen tek seçim, type="multiple" birbirinden bağımsız toggle'lardır.

KararlıKaynak kod

değer: "left"

const [align, setAlign] = useState("left");

<ToggleGroup type="single" aria-label="Metin hizalama" value={align} onValueChange={setAlign}>
<ToggleGroupItem value="left" aria-label="Sola hizala"><AlignLeftIcon /></ToggleGroupItem>
<ToggleGroupItem value="center" aria-label="Ortala"><AlignCenterIcon /></ToggleGroupItem>
<ToggleGroupItem value="right" aria-label="Sağa hizala"><AlignRightIcon /></ToggleGroupItem>
</ToggleGroup>

Import

import { Toggle, ToggleGroup, ToggleGroupItem } from "@meridui/react";

Örnekler

Çoklu

değer: ["bold"]

const [format, setFormat] = useState<string[]>(["bold"]);

<ToggleGroup type="multiple" aria-label="Biçimlendirme" value={format} onValueChange={setFormat}>
<ToggleGroupItem value="bold">Kalın</ToggleGroupItem>
<ToggleGroupItem value="italic">İtalik</ToggleGroupItem>
<ToggleGroupItem value="underline">Altı çizili</ToggleGroupItem>
</ToggleGroup>

Toggle

<Toggle defaultPressed>Izgarayı göster</Toggle>
<Toggle size="sm">Hizala</Toggle>
<Toggle disabled>Cetveller</Toggle>

API referansı

Toggle

Tüm <button> attribute'larını kabul eder; ref butona gider.

Prop	Tip	Varsayılan	Açıklama
`pressed`	`boolean`	–	Controlled basılı state'i.
`defaultPressed`	`boolean`	`false`	Uncontrolled kullanımda başlangıç state'i.
`onPressedChange`	`(pressed: boolean) => void`	–	Yeni state ile çağrılır.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Yükseklik.

ToggleGroup

Bir div role="group" render'lar; aria-label ya da aria-labelledby ile ad ver.

Prop	Tip	Varsayılan	Açıklama
`type`Zorunlu	`"single" \| "multiple"`	–	Aynı anda tek öğe (tekrar basınca kapanır) ya da istenen sayıda öğe.
`value`	`string \| string[]`	–	Controlled değer: string ("" hiçbiri) ya da string[].
`defaultValue`	`string \| string[]`	–	Uncontrolled kullanımda başlangıç değeri.
`onValueChange`	`(value) => void`	–	Yeni değerle çağrılır.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Hangi ok tuşlarının focus'u taşıdığı ve yerleşim.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Tüm öğelerin boyutu.
`disabled`	`boolean`	`false`	Tüm öğeleri devre dışı bırakır.

ToggleGroupItem

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

Prop	Tip	Varsayılan	Açıklama
`value`Zorunlu	`string`	–	Öğe açıkken bildirilen değer.
`disabled`	`boolean`	–	Öğeyi devre dışı bırakır; ok tuşları atlar.

Stil verme

Sınıf	Eleman
`.mrd-toggle`	Toggle ve gruptaki her öğe (`data-state="on" \| "off"`, `data-size`)
`.mrd-toggle-group`	Grup (`data-orientation`)
`.mrd-toggle-group__item`	Grup öğesi

Erişilebilirlik

Her öğe bir <button aria-pressed>'dir; ekran okuyucular “basılı” / “basılı değil” diye okur. Grup tek bir tab durağıdır (roving tabindex); ok tuşları state'i değiştirmeden focus'u taşır, Space ya da Enter değiştirir. Yalnızca ikon içeren öğeler aria-label ister.

Tuş	Ne yapar
`Tab`	Gruba (basılı öğeye ya da ilk öğeye) girer ve gruptan çıkar.
`ArrowRightArrowDown`	Sonraki öğe (başa döner; RTL'de ArrowLeft).
`ArrowLeftArrowUp`	Önceki öğe (sona döner).
`HomeEnd`	İlk / son öğe.
`SpaceEnter`	Focus'taki öğeyi açar ya da kapatır.

Kullanım ilkeleri

Yap

Metin hizalama gibi anında uygulanan araç seçenekleri için tekli bir ToggleGroup kullan.

Kaçın

Görünümler ya da sayfalar arasında geçiş için kullanma; bu SegmentedControl ya da Tabs'in işi.

İlgili sayfalar

SegmentedControl — görünümler arasında zorunlu tek seçim.
Switch — açık ya da kapalı bir ayar.