Dikey düzen
Sol menülü panel düzeni. Masaüstünde daraltılabilen yan menü, mobilde soldan açılan çekmece ve sayfa başlığı, arama, işlemler, tema düğmesi ile kullanıcı menüsünü taşıyan yüzen bir üst çubuk içerir. Uygulamanın ana düzeni olarak HTML belgesinin tamamını çizer.
Temel kullanım
Düzen <html> etiketinden </body> etiketine kadar tüm belgeyi çizer; uygulamanın ana Blade düzeninde tek başına kullanılır. Varlıklarınızı (@vite, favicon) head slot'una, menüyü nav slot'una, sayfa içeriğini varsayılan slot'a koyun. @livewireScripts, bildirimler (acun:toast-container) ve form koruma penceresi düzene zaten eklidir.
<acun:layout.sidebar
:title="$title ?? null"
brand-name="Acun Panel"
brand-tagline="Mağaza Yönetimi"
:home-url="route('dashboard')"
>
<acun:slot:head>
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
@vite(['resources/css/app.css', 'resources/js/app.js'])
</acun:slot:head>
<acun:slot:logo><img src="/logo.svg" alt="" class="size-7"></acun:slot:logo>
<acun:slot:nav>
<acun:menu menu="main" />
</acun:slot:nav>
{{ $slot }}
</acun:layout.sidebar>| Prop | Değerler |
|---|---|
title | Sekme başlığı; verilmezse uygulama adı |
brand-name | Menünün üstündeki ad; verilmezse config('app.name') |
brand-tagline | Adın altındaki küçük satır |
home-url | Logonun bağlantısı; verilmezse url('/') |
Logo ve logo yazısı
Logonuz bir işaret ile bir yazıdan oluşuyorsa işareti logo slot'una, yazıyı (ör. SVG olarak) wordmark slot'una verin: yazı brand-name ve brand-tagline yerine işaretin yanında çizilir. Menü daraltılınca yazı gizlenir, yalnızca işaret kalır. brand-name yine mobil çekmecenin başlığı olarak kullanılır.
<acun:layout.sidebar brand-name="Acun Panel" :home-url="route('dashboard')">
<acun:slot:logo><img src="/logo-icon.svg" alt="" class="size-[1.875rem]"></acun:slot:logo>
<acun:slot:wordmark><img src="/logo-text.svg" alt="Acun Panel" class="h-[1.875rem] w-auto"></acun:slot:wordmark>
{{-- … --}}
</acun:layout.sidebar>Üst çubuk
Üst çubuğun solunda page-title metni ya da daha zengin içerik için heading slot'u yer alır; başlık yoksa arama sola yaslanır. search ortada (md ve üstü), actions tema düğmesinden önce, userMenu en sağda gösterilir. Tema düğmesini kaldırmak için :theme-toggle="false" verin.
<acun:layout.sidebar page-title="Satış raporu">
<acun:slot:search>
<acun:command-palette :items="$aramaOgeleri" />
</acun:slot:search>
<acun:slot:actions>
<acun:button variant="ghost" size="icon" aria-label="Bildirimler" title="Bildirimler">
<acun:icon name="bell" />
</acun:button>
</acun:slot:actions>
<acun:slot:userMenu>
<acun:user-menu :name="auth()->user()->name">
<acun:dropdown.item :href="route('profil.duzenle')" wire:navigate>Ayarlar</acun:dropdown.item>
</acun:user-menu>
</acun:slot:userMenu>
{{ $slot }}
</acun:layout.sidebar>| Prop | Değerler |
|---|---|
page-title | Üst çubuğun solundaki sayfa başlığı |
theme-toggle | true | false |
Kullanıcı tercihleri
Kullanıcının kayıtlı tercihlerini verirseniz sayfa ilk karede o görünümle açılır; düzene verilen değer tarayıcıda saklanan seçimin her zaman önüne geçer. null "kaydedilmemiş" demektir: o tercih için tarayıcıdaki seçim, o da yoksa varsayılan kullanılır. Bu yüzden kaydı olmayan kullanıcı için ayrıca varsayılan vermeyin. preference-url verilirse kullanıcı görünümü değiştirdiğinde yeni değer bu adrese POST edilir (ayrıntılar Head sayfasında). navbar-mode: fixed üst çubuğu yerinde tutar, static onu içerikle birlikte kaydırır, hidden gizler; hiçbir yerde kayıt yoksa fixed kullanılır.
<acun:layout.sidebar
brand-name="Acun Panel"
:theme="auth()->user()?->tema_tercihi"
:brand-color="auth()->user()?->marka_rengi"
:sidebar-mode="auth()->user()?->sidebar_modu"
:navbar-mode="auth()->user()?->navbar_modu"
:semi-dark="auth()->user()?->koyu_menu"
:preference-url="route('arayuz-tercihi.guncelle')"
>
{{ $slot }}
</acun:layout.sidebar>| Prop | Değerler |
|---|---|
theme | light | dark | system |
brand-color | default | green | red | yellow | blue | gray | dark | #rrggbb |
sidebar-mode | expanded | collapsed |
navbar-mode | fixed | static | hidden | null |
semi-dark | true | false | null |
preference-url | Tercihlerin kaydedileceği POST adresi |
Görünüm özelleştirici
customizer açıkken sağ kenarda dişli düğmesi çıkar ve acun:theme-customizer paneli eklenir: tema, ana renk, çerçeveli görünüm, menü ve üst çubuk seçenekleri. Seçimler anında uygulanır, tarayıcıda saklanır ve preference-url varsa hesaba kaydedilir. Bu örnekte panel tek başına kullanıldı; menü ve üst çubuk seçenekleri burada etkisizdir. Ana renk seçimi bu tarayıcıda saklanır, "Varsayılana döndür" ile geri alınır.
<acun:drawer.trigger name="theme-customizer"><acun:button variant="white">
<acun:icon name="cog-6-tooth" size="4" /> Görünüm panelini aç
</acun:button></acun:drawer.trigger>
<acun:theme-customizer />
{{-- Düzende: <acun:layout.sidebar customizer …> --}}| Prop | Değerler |
|---|---|
customizer | true | false |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
title | null | Sekme başlığı; verilmezse uygulama adı |
brand-name | config('app.name') | Menünün üstündeki marka adı (wordmark slot'u yoksa) |
brand-tagline | null | Marka adının altındaki küçük satır |
home-url | url('/') | Logonun bağlantısı |
drawer-title | null | Mobil çekmecenin başlığı; verilmezse brand-name |
page-title | null | Üst çubuğun solundaki sayfa başlığı (heading slot'u verilmemişse) |
theme-toggle | true | Üst çubuktaki tema düğmesi |
theme | null | light · dark · system; null ise tarayıcıdaki tercih |
brand-color | null | default · green · red · yellow · blue · gray · dark · #rrggbb |
sidebar-mode | null | expanded · collapsed; null ise tarayıcıdaki tercih |
navbar-mode | null | fixed · static · hidden; null ise tarayıcıdaki tercih, o da yoksa fixed |
preference-url | null | Görünüm tercihlerinin POST edileceği adres |
skin | null | default · bordered (gölgesiz, 1px kenarlıklı) |
semi-dark | null | Açık temada koyu yan menü; false kapatır, null ise tarayıcıdaki tercih |
customizer | false | Sağ kenarda görünüm özelleştirici |