Hap işlem

55 · Gelişmiş UI

Renkli yuvarlak rozetli ve etiketli işlem düğmesi. Mobil ekranlarda birkaç hızlı işlemi yan yana, eşit genişlikte sunmak için kullanılır.

PRO acun:pill-action

Temel kullanım

Rozetin içeriği (ikon ya da tek karakter) slot'tan, altındaki yazı label ile gelir. Düğmeler bulundukları satırı eşit paylaşacak şekilde genişler; bir kapsayıcı flex içine yan yana koyun.

CANLI ÖRNEK

<div class="flex flex-wrap">
    <acun:pill-action label="Onayla" variant="success"><acun:icon name="check" size="3.5" /></acun:pill-action>
    <acun:pill-action label="Beklet" variant="warning"><acun:icon name="exclamation-triangle" size="3.5" /></acun:pill-action>
    <acun:pill-action label="Adres"><acun:icon name="map-pin" size="3.5" /></acun:pill-action>
    <acun:pill-action label="İptal" variant="danger"><acun:icon name="x-mark" size="3.5" /></acun:pill-action>
</div>

Prop	Değerler
`label`	Düğmenin yazısı

Renkler

Rozetin rengi variant ile seçilir: butonlarla aynı palet adları, varsayılan info. Renkleri anlamlarıyla eşleştirin: olumlu sonuç için success, uyarı için warning, ret için danger, bilgi için info. Eski adlar (emerald, amber, red, blue) da çalışır.

CANLI ÖRNEK

<div class="flex flex-wrap">
    <acun:pill-action label="Success" variant="success">1</acun:pill-action>
    <acun:pill-action label="Warning" variant="warning">2</acun:pill-action>
    <acun:pill-action label="Danger" variant="danger">3</acun:pill-action>
    <acun:pill-action label="Info">4</acun:pill-action>
    <acun:pill-action label="Primary" variant="primary">5</acun:pill-action>
</div>

Prop	Değerler
`variant`	primary \| secondary \| success \| danger \| warning \| info \| dark

Vurgulu ve pasif

emphasized rozeti dolu yeşil yapar ve yazıyı koyulaştırır; satırdaki önerilen işlemi öne çıkarmak için. Vurgu variant değerinden bağımsız olarak hep yeşildir. disabled düğmeyi soluklaştırır ve tıklanamaz yapar.

CANLI ÖRNEK

<div class="flex flex-wrap">
    <acun:pill-action label="Onayla" emphasized><acun:icon name="check" size="3.5" /></acun:pill-action>
    <acun:pill-action label="Beklet" variant="warning"><acun:icon name="exclamation-triangle" size="3.5" /></acun:pill-action>
    <acun:pill-action label="Adres" disabled><acun:icon name="map-pin" size="3.5" /></acun:pill-action>
</div>

Prop	Değerler
`emphasized`	true \| false
`disabled`	true \| false

Livewire ile

Düğme varsayılan olarak type="button" çizer; wire:click gibi öznitelikler doğrudan düğmeye geçer.

BLADE

<div class="flex flex-wrap">
    <acun:pill-action label="Onayla" emphasized wire:click="onayla({{ $siparis->id }})">
        <acun:icon name="check" size="3.5" />
    </acun:pill-action>
    <acun:pill-action label="Beklet" variant="warning" wire:click="beklet({{ $siparis->id }})">
        <acun:icon name="exclamation-triangle" size="3.5" />
    </acun:pill-action>
</div>

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`label`	`null`	Düğmenin yazısı
`variant`	`info`	primary · secondary · success · danger · warning · info · dark (emerald, amber, red, blue da çalışır)
`emphasized`	`false`	Dolu yeşil rozet ve koyu yazı (variant'tan bağımsız)
`disabled`	`false`	Soluk ve tıklanamaz

Slot'lar: varsayılan (rozetin içeriği: ikon ya da tek karakter)