Toast

37 · UI öğeleri

Ekranın sağ altında birkaç saniye görünüp kendiliğinden kaybolan kısa bildirim. Kayıt, silme ya da aktarım gibi bir işlemin sonucunu sayfayı bozmadan haber verir; hazır düzenlerin hepsinde kurulu gelir.

acun:toast-container

Türler

Bildirim bir toast olayıyla tetiklenir; renk type ile seçilir, verilmezse info (koyu gri) kullanılır. Hata için danger değil error yazıldığına dikkat edin. Bildirim 5 saniye sonra kapanır; kapat düğmesiyle daha önce de kapatılabilir.

CANLI ÖRNEK

<div class="flex flex-wrap gap-2" x-data>
    <acun:button variant="success" x-on:click="$dispatch('toast', { type: 'success', message: 'Ürün kaydedildi.' })">Başarılı</acun:button>
    <acun:button variant="danger" x-on:click="$dispatch('toast', { type: 'error', message: 'Kayıt silinemedi.' })">Hata</acun:button>
    <acun:button variant="warning" x-on:click="$dispatch('toast', { type: 'warning', message: '2 kayıt yetki nedeniyle atlandı.' })">Uyarı</acun:button>
    <acun:button variant="white" x-on:click="$dispatch('toast', { message: 'Aktarım kuyruğa alındı.' })">Bilgi</acun:button>
</div>

Prop	Değerler
`type`	success \| error \| warning \| info
`message`	Gösterilecek metin

Bağlantılı bildirim

link ve linkLabel verildiğinde mesajın altına bir bağlantı eklenir ve bildirim tıklanabilsin diye 8 saniye kalır. Sayfada Livewire varsa bağlantı sayfayı yenilemeden (Livewire.navigate) açılır, yoksa sıradan bir bağlantı gibi çalışır; tıklanınca bildirim kapanır.

CANLI ÖRNEK

<acun:button variant="white" x-data x-on:click="$dispatch('toast', { type: 'info', message: 'Aktarım tamamlandı: 148 ürün eklendi.', link: '#', linkLabel: 'Raporu göster' })">
    Bağlantılı bildirim
</acun:button>

Prop	Değerler
`link`	Açılacak adres
`linkLabel`	Bağlantı metni

Livewire'dan

Sunucu tarafında herhangi bir Livewire bileşeninden dispatch() ile aynı olayı gönderin; adlandırılmış argümanlar bildirimin alanları olur.

PHP

$this->dispatch('toast', type: 'success', message: 'Ürün kaydedildi.');

$this->dispatch('toast', type: 'error', message: 'Aktarım başarısız.', link: $raporAdresi, linkLabel: 'Ayrıntılar');

Kısa yol: WithToasts

Livewire bileşenine WithToasts trait'ini ekleyin; toast() aynı olayı daha kısa yazar. Yöntemler bilerek protected: tarayıcıdan çağrılamazlar. Tür verilmezse success kullanılır; bilinmeyen bir tür hata verir.

PHP

use Acun\Ui\Livewire\Concerns\WithToasts;

class UrunDuzenle extends Component
{
    use WithToasts;

    public function kaydet(): void
    {
        // …
        $this->toast('Ürün kaydedildi.');
        $this->toast('Aktarım başarısız.', 'error', link: $raporAdresi, linkLabel: 'Ayrıntılar');
    }
}

Yönlendirmeden sonra

İşlem başka bir sayfaya yönlendiriyorsa anlık olay yeni sayfaya ulaşmaz. Bildirimi oturuma bırakın: bir sonraki sayfa kapsayıcıyı çizdiğinde bir kez gösterilir. Livewire'da toastAfterRedirect(), controller'da Toast::flash() kullanın; birden fazla bildirim sıraya alınabilir.

PHP

// Livewire (WithToasts)
$this->toastAfterRedirect('Ürün eklendi.');
$this->redirectRoute('urunler.index', navigate: true);

// Controller
use Acun\Ui\Support\Toast;

Toast::flash('Ürün eklendi.');

return redirect()->route('urunler.index');

JavaScript'ten

Kapsayıcı olayı window üzerinden dinler. Alpine içinde $dispatch, düz JavaScript'te CustomEvent kullanın; alanlar detail içinde gönderilir.

// Alpine: x-on:click="$dispatch('toast', { type: 'success', message: 'Kopyalandı.' })"

window.dispatchEvent(new CustomEvent('toast', {
    detail: { type: 'warning', message: 'Bağlantı yavaş, yeniden deneniyor.' },
}));

Kurulum

acun:layout.sidebar, acun:layout.horizontal ve acun:layout.auth kapsayıcıyı zaten içerir. Kendi düzeninizi yazıyorsanız acun:toast-container bileşenini sayfaya bir kez, body kapanmadan önce ekleyin. Kapsayıcı aria-live="polite" bir bölgedir: yeni bildirimler ekran okuyucuda, kullanıcının o anki işini kesmeden okunur.

BLADE

<body>
    {{ $slot }}

    <acun:toast-container />
</body>

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`type`	`info`	success · error · warning · info (olay alanı)
`message`	—	Bildirim metni
`link`	`null`	Verilirse mesajın altında bağlantı; bildirim 5 yerine 8 saniye kalır. Livewire varsa sayfa yenilenmeden açılır
`linkLabel`	`null`	Bağlantı metni

Slot'lar: Kapsayıcı prop almaz; yukarıdaki alanlar toast olayının içeriğidir. Kapsayıcı aria-live="polite" bölgesidir.