Head

08 · Düzen

<head> içeriği: meta etiketleri, sayfa başlığı, görünüm ayarları (veri olarak) ve tema ile menü durumunu ilk boyamadan önce uygulayan küçük script (acun-ui-boot.js). Alpine store'ları (appearance, brand, sidebar, navbar, customizer) Acun UI JavaScript'inden gelir: import '@acunsoft/acun-ui-core' ya da @acunUiScripts. Hazır düzenler bunu kendileri ekler; yalnızca kendi düzeninizi yazarken gerekir.

acun:layout.head

Kendi düzeninizde

<head> içine koyun; charset, viewport ve csrf-token meta etiketlerini, <title> etiketini ve @livewireStyles çıktısını kendisi yazar. Favicon ve @vite gibi varlıklarınızı slot'a ekleyin. @livewireScripts ise <body> sonunda sizde kalır. Tema script'i sayfa boyanmadan çalıştığı için wire:navigate geçişlerinde de tema parlaması olmaz.

BLADE

<!DOCTYPE html>
<html lang="tr">
<head>
    <acun:layout.head :title="$title ?? null">
        <link rel="icon" href="/favicon.svg" type="image/svg+xml">
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </acun:layout.head>
</head>
<body>
    {{ $slot }}

    @livewireScripts
</body>
</html>

Prop	Değerler
`title`	Sekme başlığı; verilmezse config('app.name')

Kayıtlı tercihler

Her tercihte aynı sıra geçerlidir: önce sunucudan verilen değer, o null ise tarayıcıda (localStorage) saklanan değer, o da yoksa config/acun-ui.php içindeki uygulama varsayılanı, o da yoksa paketin varsayılanı (navbar-mode için fixed). Tek bir sayfa Acun\Ui\Support\Layout::page() ile kendi değerini zorlayabilir. null "kaydedilmemiş" anlamına geldiği için kaydı olmayan kullanıcıya ayrıca varsayılan vermeyin. Değerler ilk karede <html> etiketine yazılır (dark sınıfı, data-brand-color, data-skin, data-sidebar-collapsed).

BLADE

<acun:layout.head
    :theme="auth()->user()?->tema_tercihi"
    :brand-color="auth()->user()?->marka_rengi"
    :sidebar-mode="auth()->user()?->sidebar_modu"
    :navbar-mode="auth()->user()?->navbar_modu"
    :skin="auth()->user()?->gorunum"
    :semi-dark="auth()->user()?->koyu_menu"
    :preference-url="route('arayuz-tercihi.guncelle')"
>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</acun:layout.head>

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
`skin`	default \| bordered
`semi-dark`	true \| false

Tercihleri hesaba kaydetmek

preference-url verildiğinde kullanıcı görünümü değiştirdiği anda yeni değer bu adrese JSON olarak POST edilir; istekte X-CSRF-TOKEN başlığı bulunur. Her istekte yalnızca değişen anahtar gelir: theme, brand, sidebar, navbar, skin ya da semiDark. İstek arka planda gider, başarısız olsa da görünüm o oturumda korunur.

PHP

// routes/web.php
Route::post('arayuz-tercihi', ArayuzTercihiController::class)
    ->middleware('auth')
    ->name('arayuz-tercihi.guncelle');

// app/Http/Controllers/ArayuzTercihiController.php
public function __invoke(Request $request): Response
{
    $veri = $request->validate([
        'theme' => ['sometimes', 'in:light,dark,system'],
        'brand' => ['sometimes', 'regex:/^(#[0-9a-fA-F]{6}|default|green|red|yellow|blue|gray|dark)$/'],
        'sidebar' => ['sometimes', 'in:expanded,collapsed'],
        'navbar' => ['sometimes', 'in:fixed,static,hidden'],
        'skin' => ['sometimes', 'in:default,bordered'],
        'semiDark' => ['sometimes', 'boolean'],
    ]);

    $alanlar = [
        'theme' => 'tema_tercihi', 'brand' => 'marka_rengi', 'sidebar' => 'sidebar_modu',
        'navbar' => 'navbar_modu', 'skin' => 'gorunum', 'semiDark' => 'koyu_menu',
    ];

    $request->user()->update(
        collect($veri)->mapWithKeys(fn ($deger, $anahtar) => [$alanlar[$anahtar] => $deger])->all()
    );

    return response()->noContent();
}

Prop	Değerler
`preference-url`	POST adresi; null ise tercihler yalnızca tarayıcıda saklanır

Store'ları kullanmak

Store'lar Alpine başlarken kaydedilir ve her yerden $store ile erişilir. set ve toggle metotları değeri anında uygular, tarayıcıya yazar ve preference-url varsa hesaba kaydeder. Aşağıdaki düğmeler bu örneğin kendi çerçevesinde çalışır; ana renk seçimi tarayıcıda saklandığı için işiniz bitince "Varsayılan renk" ile geri alın.

CANLI ÖRNEK

<div x-data class="flex flex-wrap items-center gap-2">
    <acun:button variant="white" x-on:click="$store.appearance.toggle()">Temayı değiştir</acun:button>
    <acun:button variant="white" x-on:click="$store.brand.set('green')">Yeşil ana renk</acun:button>
    <acun:button variant="white" x-on:click="$store.brand.set('default')">Varsayılan renk</acun:button>
    <span class="text-sm text-gray-500 dark:text-zinc-400">
        Tema: <b x-text="$store.appearance.value"></b> · Renk: <b x-text="$store.brand.color"></b>
    </span>
</div>

Prop	Değerler
`$store.appearance`	value · set(light \| dark \| system) · toggle()
`$store.brand`	color · set(ad \| #rrggbb)
`$store.sidebar`	collapsed · toggle() · setCollapsed(true \| false)
`$store.navbar`	mode · set(fixed \| static \| hidden)
`$store.customizer`	skin · semiDark · setSkin() · setSemiDark() · reset()

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`title`	`null`	Sekme başlığı; verilmezse config('app.name')
`theme`	`null`	light · dark · system
`brand-color`	`null`	default · green · red · yellow · blue · gray · dark · #rrggbb
`sidebar-mode`	`null`	expanded · collapsed
`navbar-mode`	`null`	fixed · static · hidden; null ise tarayıcıdaki tercih, o da yoksa fixed
`skin`	`null`	default · bordered
`semi-dark`	`null`	true · false; null ise tarayıcıdaki tercih
`preference-url`	`null`	Tercihlerin POST edileceği adres; null ise yalnızca tarayıcıda saklanır

Slot'lar: varsayılan (uygulamanın head varlıkları: @vite, favicon, yazı tipleri)