ToggleGroup

Ne zaman kullanılır

ToggleGroup, aynı ayarın seçeneklerini bir arada sunar: metin hizası (tek seçim), metin biçimi (çoklu seçim), liste ya da ızgara görünümü.

Ne zaman kullanılmaz

• Formda gönderilen bir seçim için: Radyo grubu ya da onay kutusu grubu kullanın; ToggleGroup form değeri göndermez.
• Bağımsız işlemler için: ButtonGroup kullanın.
• Sayfa bölümleri arasında geçiş için: Sekmeler içerik panellerini yönetir; ToggleGroup panel göstermez.

Anatomi

AçıkKoyu

Kodu kopyala

import { Toggle, ToggleGroup } from '@bigbang/ui';

export default function Single() {
  return (
    <ToggleGroup label="Metin hizası" defaultValue={['left']}>
      <Toggle value="left" icon="align-left" label="Sola hizala" />
      <Toggle value="center" icon="align-center" label="Ortala" />
      <Toggle value="right" icon="align-right" label="Sağa hizala" />
    </ToggleGroup>
  );
}

1. Kap: role="group" ve label ile aria-label; öğeler arasında space-md (8 px).
2. Öğeler: Her biri value taşıyan Toggle bileşenleri.
3. Basılı öğe: color-surface-selected dolgu ve color-border-selected kenarlık.

Davranış

• Grup tek bir sekme durağıdır; ok tuşları odağı orientation yönünde öğeler arasında taşır.
• Tek seçimde bir öğeye basmak diğerini bırakır; basılı öğeye yeniden basmak onu da bırakır.
• multiple ile her öğe bağımsız basılır.
• variant ve size bağlam yoluyla öğelere geçer; öğenin kendi değeri önce gelir.
• disabled tüm öğeleri kapatır.

Yönergeler

• Gruba ayarın adını veren bir label verin: “Metin hizası”.
• İkonlu öğelerde her öğeye de label verin.
• Bir grupta iki ile beş öğe kullanın; daha çoğu için bir menü düşünün.
• Tek seçimde her zaman bir öğe basılı olacaksa onValueChange içinde boş diziyi yok sayın.

İçerik

• Grup etiketi ayarın adıdır; öğe etiketleri seçeneklerin adıdır.

Türkçe	İngilizce
Metin hizası	Text alignment
Sola hizala	Align left
Ortala	Centre
Sağa hizala	Align right

İlgili bileşenler

• Toggle: Grubun öğesi.
• ButtonGroup: Basılı kalmayan ilişkili işlemler.
• IconButton: Tek bir ikon işlemi.