Geçiş grubu

Geçiş grubu, tek bir denetim gibi okunan bir seçenek sırasıdır. Onu items propundan kurun ve hangisinin açık olduğunu value ile söyleyin.

Temel grup

toggleGroup({
  label: 'Metin hizalaması',
  value: 'center',
  items: [
    { value: 'left', label: 'Sol' },
    { value: 'center', label: 'Orta' },
    { value: 'right', label: 'Sağ' },
  ],
})

Düz dizeler

toggleGroup({ label: 'Yoğunluk', value: 'ferah', items: ['sıkı', 'ferah', 'geniş'] })

Bağlantılar

Statik bir sitenin genellikle istediği biçim budur: her bölme bir sayfadır. href taşıyan öğeler çapa olarak işlenir ve etkin olan aria-pressed değil aria-current="page" ile işaretlenir, çünkü bağlantı, içeri bastığınız bir düğme değildir.

Belgeler UI Örnekler

toggleGroup({
  label: 'Bölüm',
  value: 'ui',
  items: [
    { value: 'docs', label: 'Belgeler', href: '/docs' },
    { value: 'ui', label: 'UI', href: '/ui' },
    { value: 'examples', label: 'Örnekler', href: '/examples' },
  ],
})

Birden fazlası açık

value olarak bir dizi geçirin. Kap her hâlükârda düz bir group öğesidir — bir radiogroup yanlış olurdu, çünkü bunlar radyo değil basılı düğmelerdir.

toggleGroup({
  label: 'Biçimlendirme',
  value: ['bold', 'underline'],
  items: [
    { value: 'bold', label: 'Kalın' },
    { value: 'italic', label: 'Eğik' },
    { value: 'underline', label: 'Altı çizili' },
  ],
})

Boyutlar ve türevler

stack({ gap: 'md' },
  toggleGroup({ size: 'sm', label: 'Küçük', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ size: 'md', label: 'Orta', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ size: 'lg', label: 'Büyük', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ variant: 'ghost', label: 'Ghost', value: 'b', items: ['a', 'b', 'c'] }),
)

Devre dışı öğeler

toggleGroup({
  label: 'İşleyici',
  value: 'static',
  items: [
    { value: 'static', label: 'Statik' },
    { value: 'islands', label: 'Adalar' },
    { value: 'ssr', label: 'SSR', disabled: true },
  ],
})

Bir araç çubuğunda

stack({ direction: 'row', gap: 'md', wrap: true, align: 'center' },
  toggleGroup({ label: 'Hizalama', value: 'Sol', size: 'sm', items: ['Sol', 'Orta', 'Sağ'] }),
  divider({ orientation: 'vertical' }),
  toggleGroup({ label: 'Biçem', value: ['Kalın'], size: 'sm', items: ['Kalın', 'Eğik'] }),
)

Ne zaman başka bir şey kullanmalı

Seçim bir formla gönderiliyorsa choiceGroup() kullanın — gerçek radyolar, betik gerekmez. Her bölme bir sayfaysa yukarıdaki bağlantı biçimini tercih edin. Geçiş grubu, sayfanın kendisinin üzerine işlem yaptığı bir seçim içindir.

Proplar

Prop	Tür	Varsayılan	Açıklama
`items`	`Array`	`[]`	Dizeler ya da { value, label, href, disabled } nesneleri.
`value`	`string \| number \| Array`	—	Hangi öğenin açık olduğu. Birkaçı olabiliyorsa bir dizi.
`label`	`string`	—	Grup için erişilebilir ad.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Her öğeye uygulanır.
`variant`	`'outline' \| 'ghost' \| 'soft'`	`'outline'`	Kapalı bir öğenin görünüşü.