Düzenler

Düzen, sayfanın çevresindeki çerçevedir: <head>, menü, üst çubuk, sayfa altı, bildirim alanı ve görünüm tercihleri.

En kısa örnek

@extends('layouts.admin.vertical')

@section('title', __('Raporlar'))

@section('content')
    <acun:page-header :title="__('Raporlar')" />
@endsection

Sayfa solda menüsü olan panel düzeninde açılır. Livewire sayfasında aynı düzeni #[Layout('layouts.admin.vertical')] ile verin.

Düzen seçmek

Temadaki düzen dosyaları

resources/views/layouts/admin/
├── vertical.blade.php      dikey düzen: <acun:layout.sidebar>
├── horizontal.blade.php    yatay düzen: <acun:layout.horizontal>
├── blank.blade.php         menüsüz düzen: <acun:layout.blank>
└── sections/
    ├── sidebar.blade.php   logo ve menü
    ├── navbar.blade.php    arama, dil seçici, kullanıcı menüsü
    └── footer.blade.php    sayfa altı

Her düzen dosyası paketin bir düzen bileşenini çağırır. Bölüm dosyalarını @include ile içine alır; bölümler bileşenin slot'larını doldurur. İki panel düzeni aynı bölümleri kullanır. Logoyu, kullanıcı menüsünü ya da sayfa altını değiştirmek için ilgili bölüm dosyasını düzenleyin.

vertical.blade.php kısaca şöyledir:

<acun:layout.sidebar customizer brand-name="Acunsoft" :home-url="route('dashboard')" :title="$documentTitle">
    <acun:slot:head>@vite(['resources/css/acun-ui.css', 'resources/js/acun-ui.js', 'resources/js/app.js'])</acun:slot:head>

    @include('layouts.admin.sections.sidebar', ['horizontal' => false])
    @include('layouts.admin.sections.navbar')
    <acun:slot:footer>@include('layouts.admin.sections.footer')</acun:slot:footer>

    @hasSection('content')
        @yield('content')
    @else
        {{ $slot ?? '' }}
    @endif
</acun:layout.sidebar>

@yield('content') Blade sayfasını, $slot Livewire sayfasını yerleştirir. Dosyanın başında menü (Menu::fromFile('main')) ve sekme başlığı ($documentTitle) hazırlanır. Başlık sayfanın @section('title') değerinden, yoksa #[Title] anahtarından gelir; düzen anahtarı __() ile çevirir. Başlığın sonundaki eki $documentTitle satırında değiştirebilirsiniz.

Yatay düzen stacked prop'unu kullanır: menü, logo ile aramanın altında kendi satırındadır. Sayfa altı acun:footer bileşeniyle çizilir: soldaki yazı varsayılan slot'a, bağlantılar links slot'una gider.

Slot'lar

Logo verilmediğinde daraltılmış menü, marka adının ilk harfini ana renkli küçük bir kare içinde gösterir.

Sık kullanılan prop'lar

Görünüm prop'ları (theme, brand-color, skin, semi-dark, sidebar-mode, navbar-mode) Özelleştirme sayfasında. Yatay düzen brand-tagline, page-title, semi-dark, sidebar-mode ve navbar-mode almaz.

Giriş ve hata sayfaları

Menüsüz sayfalar layouts.admin.blank düzenini kullanır. Hata ekranı acun:message-panel ile çizilir:

@extends('layouts.admin.blank')

@section('title', __('Sayfa bulunamadı'))

@section('content')
    <acun:message-panel code="404" :heading="__('Sayfa bulunamadı')" :description="__('Aradığınız sayfa taşınmış ya da silinmiş olabilir.')">
        <acun:slot:action><acun:button :href="route('dashboard')">{{ __('Panoya dön') }}</acun:button></acun:slot:action>
    </acun:message-panel>
@endsection

acun:message-panel şu prop'ları alır: code, heading, description. Slot'ları media (kodun üstündeki çizim), action (düğmeler) ve illustration'dır (düğmelerin altı). Laravel'in hata sayfaları için aynı kodu resources/views/errors/404.blade.php gibi dosyalara yazın.

Giriş ekranı acun:auth-panel ile çizilir:

<acun:auth-panel variant="basic" :home-url="route('home')">
    <acun:slot:logo><img src="/logo.svg" alt="Acme" class="h-8"></acun:slot:logo>

    <acun:auth-header :title="__('Hoş geldiniz')" :description="__('Hesabınıza giriş yapın.')" />
    …form…
</acun:auth-panel>

variant="cover" (varsayılan) solda bir çizim, sağda formu gösterir. Çizimi illustration slot'uyla değiştirin. variant="basic" formu ortada tek bir kartta gösterir; logo verilmezse uygulamanın adı yazılır. Temada giriş, kayıt ve şifre sayfaları paneli resources/views/components/auth-screen.blade.php bileşeniyle sarar; logo ve çizim oradadır.

Acun UI yalnızca bu ekranların görünümünü verir, kimlik doğrulama paketi kurmaz. Giriş, kayıt ve şifre sıfırlamanın mantığını, rotalarını ve modelini siz kurarsınız: kendi controller'larınız, Livewire bileşenleriniz ya da Laravel Fortify, Breeze, Sanctum gibi bir paket. Form alanlarını ve mesajları acun:input, acun:checkbox ve acun:auth-session-status ile çizin.

Sayfa kaydırma

Panel düzenlerinde sayfanın kendisi (pencere) kayar; iç içe bir kaydırma alanı yoktur. Yan menü sabittir ve kendi içinde kayar. Üst çubuk navbar-mode="fixed" iken sayfanın üstüne yapışır; yatay düzende her zaman yapışıktır. İçerik altından geçerken çubuğun çevresindeki bulanık şerit içeriği yumuşatır. static modunda üst çubuk sayfayla birlikte kayar.

Bu sayede klavyeyle kaydırma hemen çalışır ve mobil tarayıcı adres çubuğunu gizleyebilir. Geri tuşunda kaydırma konumu korunur; window kaydırmasını dinleyen kütüphaneler sorunsuz çalışır. Fare ve dokunmatik yüzeyde sayfanın ucundaki esneme kapalıdır. Dokunmatik ekranda telefonun kendi davranışı (aşağı çekip yenileme) korunur. Sayfa içi bağlantılar (#bolum) yapışkan üst çubuğun altında durur. Pencere (modal), çekmece ve komut paleti açıkken arkadaki sayfa kilitlenir.

İleri düzey

Tercihleri hesapta saklamak

Kullanıcı temayı, ana rengi ya da menü genişliğini değiştirince değer hemen uygulanır ve tarayıcıda saklanır. preference-url verirseniz değer o adrese JSON olarak da gönderilir: { "theme": "dark" }, { "sidebar": "collapsed" }, { "brand": "blue" }, { "navbar": "static" }, { "skin": "bordered" }, { "semiDark": true }.

<acun:layout.sidebar :theme="auth()->user()?->theme" :preference-url="route('preferences.update')" …>

Rotayı ve kaydı siz yazarsınız. Değerleri kullanıcı tablosunda saklayıp düzen prop'larına geri verirseniz tercihler cihazlar arasında korunur. Düzene verilen değer tarayıcıdakinden önce gelir. null bırakılan tercih için tarayıcıdaki değer, o da yoksa varsayılan kullanılır. Bu yüzden henüz kaydedilmemiş tercihi ?? 'fixed' gibi bir varsayılanla değil, null olarak verin.

Kendi pencereniz için kaydırma kilidi

Kendi yazdığınız bir pencere açıkken arkadaki sayfayı aynı kilitle durdurun. Kilit sayaçlıdır: iç içe pencerelerde sonuncusu kapanınca kalkar.

AcunUI.scrollLock.lock();   // pencere açılırken
AcunUI.scrollLock.unlock(); // kapanırken

Pencerenin bütün davranışı için onu katman yöneticisine kaydedin. AcunUI.overlays.open(element, { close }) şunları birlikte kurar: kaydırma kilidi, Esc ile kapatma, Tab'ın pencerede kalması (trap) ve kapanınca odağın geri dönmesi. AcunUI.overlays.close(element) hepsini geri alır. Esc ve Tab yalnızca en son açılan pencereye gider; üstte açılan pencere üstte görünür.

const pencere = document.querySelector('#yardim-penceresi');

function ac() {
    pencere.hidden = false;
    AcunUI.overlays.open(pencere, { close: kapat, trap: pencere });
    AcunUI.focus.first(pencere); // ilk odaklanabilir öğeye geçer
}

function kapat() {
    AcunUI.overlays.close(pencere);
    pencere.hidden = true;
}

Paketin düzen bileşenleri

Temanın düzen dosyaları bu bileşenleri kullanır. Kendi düzeninizi yazarken doğrudan da kullanabilirsiniz:

• acun:layout.sidebar ve acun:layout.horizontal: panel düzenleri. Bildirim alanını ve PRO kuruluysa kaydedilmemiş değişiklik penceresini kendileri ekler.
• acun:layout.blank: yalnızca belge. <head> (tema ve renk tercihleriyle), bildirim alanı ve Livewire betikleri vardır; üst çubuk ve menü yoktur. Bileşene verilen öznitelikler <body> etiketine gider. Prop'ları: title, theme, brand-color.
• acun:layout.auth ve acun:layout.message: acun:auth-panel ve acun:message-panel'in boş düzen içindeki hâli. Panelin prop'larını ve slot'larını alırlar; ayrıca title, theme, brand-color prop'ları ve head slot'u vardır.
• acun:layout.head: tamamen kendi düzeninizi yazıyorsanız <head> içine koyun. Tema tercihini ilk boyamadan önce uygular, böylece sayfa açılırken beyaz parlama olmaz.

Bütün düzenler sonda @stack('page-scripts') basar. Eski ad window.acunScrollLock hâlâ çalışır ama konsola uyarı yazar; AcunUI.scrollLock kullanın.

Daha fazlası

• İlk sayfanız: düzene yeni bir sayfa eklemek.
• Menü: menü dosyası ve arama.
• Özelleştirme: renk, koyu tema ve görünüm seçenekleri.
• Mevcut projeye ekleme: tema olmadan düzen kurmak.