Mesaj düzeni
404, 403, 500, bakım ve yakında sayfaları için tam sayfa mesaj düzeni: büyük bir kod, başlık, açıklama, düğmeler ve isteğe bağlı bir illüstrasyon. Kendi belgesi olan bir sayfada aynı ekran için `acun:message-panel` kullanın.
Hata sayfası
Laravel, bir hata kodu için resources/views/errors/{kod}.blade.php dosyasını kendiliğinden kullanır. code başlığın üstünde büyük gösterilir, heading zorunludur. Düğmeleri action slot'una koyun; uygulamanızın CSS ve JS dosyaları head slot'una gelir.
{{-- resources/views/errors/404.blade.php --}}
<acun:layout.message code="404" heading="Sayfa bulunamadı" description="Aradığınız sayfa taşınmış ya da silinmiş olabilir.">
<acun:slot:head>@vite(['resources/css/app.css', 'resources/js/app.js'])</acun:slot:head>
<acun:slot:action>
<acun:button :href="url('/')">Anasayfaya dön</acun:button>
<acun:button :href="url()->previous()" variant="white">Geri git</acun:button>
</acun:slot:action>
</acun:layout.message>| Prop | Değerler |
|---|---|
code | 404, 403, 500… |
heading | Ana başlık (zorunlu) |
description | Başlığın altındaki metin |
action | Düğmeler (slot) |
Bakım sayfası
code verilmezse kod satırı hiç gösterilmez; bakım ve yakında sayfaları için uygundur. Bileşenin içine yazdığınız içerik açıklama ile düğmeler arasına gelir. php artisan down çalıştırıldığında Laravel errors/503.blade.php dosyasını gösterir.
{{-- resources/views/errors/503.blade.php --}}
<acun:layout.message heading="Bakım çalışması yapılıyor" description="Panel kısa süre içinde yeniden kullanılabilir olacak.">
<acun:slot:head>@vite(['resources/css/app.css', 'resources/js/app.js'])</acun:slot:head>
<p class="mt-4 text-sm text-gray-500 dark:text-zinc-400">Tahmini bitiş: 14.00</p>
</acun:layout.message>| Prop | Değerler |
|---|---|
(slot) | Açıklama ile düğmeler arasındaki ek içerik |
İllüstrasyon
illustration slot'u sayfanın en altına, ortalanmış dar bir alana yerleşir. Görsel yerine büyük bir acun:icon da kullanabilirsiniz.
<acun:layout.message code="403" heading="Bu sayfaya erişim yetkiniz yok" description="Yetki için sistem yöneticinize başvurun.">
<acun:slot:head>@vite(['resources/css/app.css', 'resources/js/app.js'])</acun:slot:head>
<acun:slot:action><acun:button :href="url('/')">Anasayfaya dön</acun:button></acun:slot:action>
<acun:slot:illustration>
<div class="flex justify-center text-brand-200 dark:text-brand-500/30"><acun:icon name="lock-closed" size="40" stroke="1" /></div>
</acun:slot:illustration>
</acun:layout.message>| Prop | Değerler |
|---|---|
illustration | Sayfanın altındaki görsel (slot) |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
heading | — | Ana başlık (zorunlu) |
code | null | Başlığın üstündeki büyük kod; boşsa gösterilmez |
description | null | Başlığın altındaki açıklama |
title | null | Sekme başlığı; boşsa heading kullanılır |
theme | null | light · dark · system |
brand-color | null | default · green · red · yellow · blue · gray · dark ya da #rrggbb |