Uyarı
İlgili içeriğin hemen üstünde, sayfanın içinde duran bildirim kutusu. İşlem sonucu, dikkat gerektiren bir durum ya da kalıcı bir hata için kullanılır; birkaç saniyelik geri bildirim için Toast daha uygundur.
Varyantlar
Renk ve ikon variant ile belirlenir; verilmezse paletin Bilgi rengindeki (sky) info kullanılır. Genel bilgilendirme için info, tamamlanan işlemler için success, dikkat edilmesi gereken durumlar için warning, hata ve engellenen işlemler için danger seçin. Her varyant kendi ikonunu kendiliğinden gösterir.
<div class="space-y-3">
<acun:alert>Ekim kampanya takvimi yayınlandı.</acun:alert>
<acun:alert variant="success">Ürün bilgileri güncellendi.</acun:alert>
<acun:alert variant="warning">Silinen kayıtlar da listeleniyor.</acun:alert>
<acun:alert variant="danger">Müşterinin 3 açık siparişi olduğu için silme işlemi yapılmadı.</acun:alert>
</div>| Prop | Değerler |
|---|---|
variant | primary | secondary | success | danger | warning | info | dark (varsayılan info) |
Başlıklı
title verildiğinde üstte kalın bir başlık satırı çıkar, slot içeriği onun altında açıklama olarak durur. Birden fazla cümle ya da liste içeren uyarılarda mesajın özünü başlığa yazın.
<acun:alert variant="danger" title="Aktarım tamamlanamadı">
<ul class="list-disc space-y-1 ps-4">
<li>12. satır: Stok kodu eksik.</li>
<li>27. satır: Kategori kodu (ELK-09) bulunamadı.</li>
</ul>
</acun:alert>| Prop | Değerler |
|---|---|
title | Kalın başlık satırı; boşsa yalnızca içerik gösterilir |
Kapatılabilir
dismissible sağ üste bir kapat düğmesi ekler. Uyarı yalnızca tarayıcıda gizlenir; sayfa yenilendiğinde yeniden görünür.
<acun:alert variant="warning" dismissible>
Mobil uygulamanın eski sürümünü kullanan 4 ekip üyesi var.
</acun:alert>| Prop | Değerler |
|---|---|
dismissible | true | false |
Livewire ile kapatma
dismiss-action bir Livewire metodunun adını alır: kapat düğmesi uyarıyı gizler ve bu metodu da çağırır. Böylece duyuru sunucuda okundu olarak işaretlenir ve sayfa yenilenince geri gelmez. dismiss-action verildiğinde dismissible yazmasanız da kapat düğmesi görünür.
@if ($duyuru)
<acun:alert title="{{ $duyuru->baslik }}" dismiss-action="duyuruyuKapat">
{{ $duyuru->metin }}
</acun:alert>
@endif| Prop | Değerler |
|---|---|
dismiss-action | Livewire metodunun adı (ör. duyuruyuKapat) |
Zengin içerik
Slot serbest HTML kabul eder: bağlantı, kalın metin ya da küçük bir düğme ekleyebilirsiniz. Metin rengi varyanttan gelir; bağlantıları underline ile belirginleştirin.
<acun:alert variant="info" title="Yeni sürüm hazır">
<p>Mobil uygulamanın <strong>2.4</strong> sürümü çevrimdışı sipariş kaydını destekliyor.</p>
<div class="mt-3 flex flex-wrap items-center gap-3">
<acun:button size="sm">Güncellemeyi başlat</acun:button>
<a href="#" class="font-medium underline underline-offset-2 hover:no-underline">Sürüm notları</a>
</div>
</acun:alert>Erişilebilirlik notu
Bileşen kendiliğinden bir ARIA rolü eklemez; sayfa açılırken var olan uyarılar normal metin gibi okunur. Bir işlemden sonra sonradan beliren önemli hatalarda role="alert" verin, ekran okuyucu mesajı hemen duyurur. Ek öznitelikler kapsayıcıya aktarılır.
<acun:alert variant="danger" role="alert">Oturumunuzun süresi doldu. Lütfen yeniden giriş yapın.</acun:alert>| Prop | Değerler |
|---|---|
role | alert (acil) | status (bilgilendirme) |
Başlık ve açıklama parçaları
Uyarı içeriğinde liste, bağlantı ya da düğme olacaksa acun:alert.title ve acun:alert.description parçalarını kullanın; ikon, renk ve kapatma düğmesi aynı kalır.
<acun:alert variant="warning" dismissible>
<acun:alert.title>3 kargo gecikmede</acun:alert.title>
<acun:alert.description>
<ul class="list-disc space-y-0.5 ps-4">
<li>Kadıköy deposu: 2 sipariş, tahmini 1 gün gecikme</li>
<li>Üsküdar deposu: 1 sipariş, adres doğrulanamadı</li>
</ul>
<div class="mt-3 flex flex-wrap gap-2">
<acun:button size="sm" variant="warning">Kargoyu yeniden planla</acun:button>
<acun:button size="sm" variant="white">Kargo firmasını ara</acun:button>
</div>
</acun:alert.description>
</acun:alert>
<acun:alert variant="success" class="mt-4">
<acun:alert.title>Kampanya yayınlandı</acun:alert.title>
<acun:alert.description>
12 ürünlük kampanya 486 müşteriye e-postayla gönderildi.
<a href="#" class="font-medium underline underline-offset-2">Kampanyayı görüntüle</a>
</acun:alert.description>
</acun:alert>Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
variant | info | info (sky) · success (emerald) · warning (amber) · danger (red); tanımsız değer info olur |
title | null | Kalın başlık satırı |
dismissible | false | Kapat düğmesi; uyarıyı yalnızca tarayıcıda gizler |
dismiss-action | null | Kapatınca çağrılacak Livewire metodu; verilirse kapat düğmesi de eklenir |