Buton grubu

24 · UI öğeleri

Birbiriyle ilgili butonları bitişik, tek parça bir grup olarak gösterir. Dönem seçimi ya da ikonlu araç çubukları için uygundur.

acun:button-group

Temel kullanım

Grup yalnızca kapsayıcıdır ve role="group" verir; köşeleri ve bitişik kenarları butonlar kendi sınıflarıyla ayarlar. Her butona aşağıdaki sınıfları ekleyin. Grubun ne işe yaradığını ekran okuyuculara aria-label ile anlatın.

CANLI ÖRNEK

<acun:button-group aria-label="Dönem">
    <acun:button variant="white" class="!rounded-none first:!rounded-l last:!rounded-r -ml-px first:ml-0 relative hover:z-10 focus-visible:z-10">Gün</acun:button>
    <acun:button variant="white" class="!rounded-none first:!rounded-l last:!rounded-r -ml-px first:ml-0 relative hover:z-10 focus-visible:z-10">Hafta</acun:button>
    <acun:button variant="white" class="!rounded-none first:!rounded-l last:!rounded-r -ml-px first:ml-0 relative hover:z-10 focus-visible:z-10">Ay</acun:button>
</acun:button-group>

Prop	Değerler
`butonların class değeri`	!rounded-none first:!rounded-l last:!rounded-r -ml-px first:ml-0 relative hover:z-10 focus-visible:z-10

İkonlu araç çubuğu

Yalnızca ikon içeren butonlarla (size="icon") sıkışık bir araç çubuğu kurulur. Her butona aria-label ve title verin.

CANLI ÖRNEK

<acun:button-group aria-label="Kayıt işlemleri">
    <acun:button variant="white" size="icon" aria-label="Düzenle" title="Düzenle" class="!rounded-none first:!rounded-l last:!rounded-r -ml-px first:ml-0 relative hover:z-10 focus-visible:z-10">
        <acun:icon name="pencil-square" size="4" />
    </acun:button>
    <acun:button variant="white" size="icon" aria-label="Kopyala" title="Kopyala" class="!rounded-none first:!rounded-l last:!rounded-r -ml-px first:ml-0 relative hover:z-10 focus-visible:z-10">
        <acun:icon name="document-duplicate" size="4" />
    </acun:button>
    <acun:button variant="white" size="icon" aria-label="Sil" title="Sil" class="!rounded-none first:!rounded-l last:!rounded-r -ml-px first:ml-0 relative hover:z-10 focus-visible:z-10">
        <acun:icon name="trash" size="4" />
    </acun:button>
</acun:button-group>

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`(öznitelikler)`	—	Prop almaz; class, aria-label gibi öznitelikler kapsayıcıya eklenir

Slot'lar: varsayılan (acun:button öğeleri)