Onay penceresi

31 · UI öğeleri

Silme gibi geri alınamaz bir işlemden önce kullanıcıya son kez soran dar pencere. acun:modal üzerine kuruludur; açma, kapatma ve odak davranışı aynıdır.

acun:confirmation-dialog

Temel kullanım

Pencere modal gibi adıyla açılır: acun:modal.trigger, acun:modal:open olayı ya da AcunUI.modal.open('catalog-product-delete'). title ve description ile neyin silineceğini açıkça yazın; onay düğmesinin metnini confirm-text ile işlemin adı yapın ("Onayla" yerine "Sil").

CANLI ÖRNEK

<acun:modal.trigger name="catalog-product-delete"><acun:button variant="outline-danger">Ürünü sil</acun:button></acun:modal.trigger>

<acun:confirmation-dialog
    name="catalog-product-delete"
    title="Ürünü sil"
    description="'Kablosuz kulaklık' ürününü silmek istediğinize emin misiniz? Bu işlem geri alınamaz."
    confirm-text="Sil"
/>

Prop	Değerler
`title`	Varsayılan: Emin misiniz?
`description`	Açıklama metni
`confirm-text`	Varsayılan: Onayla
`cancel-text`	Varsayılan: Vazgeç

Onayı dinlemek

Slot boşsa onay düğmesi pencereyi kapatır ve {name}-confirmed olayını yayar. Bu olayı .window ile dinleyip işlemi başlatın.

CANLI ÖRNEK

<div x-data x-on:catalog-product-archive-confirmed.window="$dispatch('toast', { type: 'success', message: 'Ürün arşivlendi.' })">
    <acun:modal.trigger name="catalog-product-archive"><acun:button variant="white">Arşivle</acun:button></acun:modal.trigger>
</div>

<acun:confirmation-dialog
    name="catalog-product-archive"
    title="Ürünü arşivle"
    description="Arşivlenen ürün mağazada görünmez, satış kayıtları saklanır."
    confirm-text="Arşivle"
/>

Prop	Değerler
`{name}-confirmed`	Onaylanınca yayılan olay

Kendi onay düğmeniz

Slot'a bir düğme koyduğunuzda varsayılan onay düğmesinin yerini alır ve confirm-text kullanılmaz. Düğmede close() ile pencereyi kendiniz kapatın.

CANLI ÖRNEK

<acun:modal.trigger name="catalog-customer-delete"><acun:button variant="outline-danger">Müşteriyi sil</acun:button></acun:modal.trigger>

<acun:confirmation-dialog name="catalog-customer-delete" title="Müşteriyi kalıcı olarak sil" description="Müşterinin tüm sipariş geçmişi de silinecek.">
    <acun:modal.close><acun:button variant="danger" x-on:click="$dispatch('toast', { type: 'success', message: 'Müşteri silindi.' })">Kalıcı olarak sil</acun:button></acun:modal.close>
</acun:confirmation-dialog>

Livewire ile

Onay düğmesine wire:click verin; işlem bitince sunucudan acun:modal:close göndererek pencereyi kapatın. Kullanıcı vazgeçtiğinde bir durumu temizlemeniz gerekiyorsa close-action kullanın. İlk adlar (open-modal, close-modal) de çalışmaya devam eder.

BLADE

<acun:confirmation-dialog name="urun-sil" title="Ürünü sil" description="Bu işlem geri alınamaz." close-action="silinecekUrunuBirak">
    <acun:button variant="danger" wire:click="sil">Sil</acun:button>
</acun:confirmation-dialog>

{{-- Bileşende: public function sil(): void { … $this->dispatch('acun:modal:close', name: 'urun-sil'); } --}}

Prop	Değerler
`close-action`	Kullanıcı kapatınca çağrılan Livewire metodu

modal.trigger ile açma

Onay penceresi de acun:modal.trigger ile açılır. Onay düğmesini acun:modal.close ile sarınca işlem çalışır ve pencere kapanır.

CANLI ÖRNEK

<acun:modal.trigger name="urun-sil">
    <acun:button variant="danger">Ürünü sil</acun:button>
</acun:modal.trigger>

<acun:confirmation-dialog name="urun-sil" title="Ürün silinsin mi?" description="Ürünün 24 varyantı ve stok kayıtları da kaldırılır. Bu işlem geri alınamaz.">
    <acun:modal.close>
        <acun:button variant="danger" x-on:click="$dispatch('toast', { type: 'success', message: 'Ürün silindi.' })">Sil</acun:button>
    </acun:modal.close>
</acun:confirmation-dialog>

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`name`	—	Zorunlu. acun:modal:open olayındaki ve AcunUI.modal.open('…') çağrısındaki ad; onayda {name}-confirmed yayılır
`title`	`Emin misiniz?`	Pencere başlığı
`description`	`null`	Açıklama metni
`confirm-text`	`Onayla`	Varsayılan onay düğmesinin metni (slot boşken)
`cancel-text`	`Vazgeç`	Vazgeç düğmesinin metni
`close-action`	`null`	Kullanıcı kapatınca çağrılan Livewire metodu

Slot'lar: varsayılan: onay düğmesinin yerine geçecek düğme(ler). Pencere genişliği her zaman sm.