İlk sayfanız

Bu sayfa temaya yeni bir yönetim sayfası eklemeyi gösterir: görünüm, rota ve menü kaydı.

En kısa örnek

{{-- resources/views/admin/customers/index.blade.php --}}
@extends('layouts.admin.vertical')

@section('title', __('Müşteriler'))

@section('content')
    <acun:page-header :title="__('Müşteriler')" />
@endsection

// routes/web.php
Route::view('/customers', 'admin.customers.index')->name('customers.index');

Adresi açın: sayfa menülü panelin içinde görünür, sekme başlığı "Müşteriler" olur. Temada panel rotaları Route::prefix('admin') grubundadır. Rotayı bu grubun içine yazarsanız adres /admin/customers olur.

Adım adım

Örnekte panele bir "Müşteriler" sayfası ekleniyor. Aynı adımlar her yeni sayfa için geçerlidir.

1. Görünümü oluşturun. Panel sayfaları resources/views/admin/ altında durur:

   {{-- resources/views/admin/customers/index.blade.php --}}
   @extends('layouts.admin.vertical')
   
   @section('title', __('Müşteriler'))
   
   @section('content')
       <section class="mx-auto w-full max-w-7xl space-y-6">
           <acun:page-header
               :title="__('Müşteriler')"
               :breadcrumbs="[['label' => __('Kayıtlar')], ['label' => __('Müşteriler')]]"
           />
   
           <acun:card>
               <acun:empty-state :title="__('Henüz müşteri yok')" :description="__('İlk müşterinizi ekleyerek başlayın.')">
                   <acun:slot:action><acun:button>{{ __('Yeni müşteri') }}</acun:button></acun:slot:action>
               </acun:empty-state>
           </acun:card>
       </section>
   @endsection
   

   @section('title') sekme başlığını verir. @section('content') düzenin ortasındaki içerik alanına yerleşir.

2. Rotayı ekleyin. Sayfa veri göstermiyorsa Route::view yeterlidir:

   // routes/web.php, Route::prefix('admin') grubunun içinde
   Route::view('/customers', 'admin.customers.index')->name('customers.index');
   

   Veritabanından veri gerekiyorsa bir controller yazın. Controller görünümü view('admin.customers.index', [...]) ile döndürür; rota Route::get('/customers', CustomerController::class) olur.

3. Menüye bir satır ekleyin:

   { "title": "Müşteriler", "icon": "users", "route": "customers.index", "active": "customers.*" }
   

   Satırı resources/menu/main.json dosyasındaki menu dizisine yazın. Sayfa hem menüde hem ⌘K aramasında görünür. active sayesinde customers.create gibi alt sayfalarda da öğe seçili kalır.

Düzeni değiştirmek

@extends satırındaki düzen adını değiştirin:

Düzenlerin içeriği ve seçenekleri Düzenler sayfasında.

Livewire sayfası

Sayfa etkileşimliyse (form, canlı arama) onu Livewire bileşeni olarak yazın:

// app/Livewire/Customers/Index.php
namespace App\Livewire\Customers;

use Illuminate\Contracts\View\View;
use Livewire\Attributes\Layout;
use Livewire\Attributes\Title;
use Livewire\Component;

#[Layout('layouts.admin.vertical')]
#[Title('Müşteriler')]
final class Index extends Component
{
    public function render(): View
    {
        return view('admin.customers.index');
    }
}

{{-- resources/views/admin/customers/index.blade.php --}}
<section class="mx-auto w-full max-w-7xl space-y-6">
    <acun:page-header :title="__('Müşteriler')" />
    …
</section>

// routes/web.php
use App\Livewire\Customers\Index as CustomersIndex;

Route::livewire('/customers', CustomersIndex::class)->name('customers.index');

#[Layout] sayfayı düzene yerleştirir. #[Title] sekme başlığının çeviri anahtarıdır; PHP özniteliğinde __() çağrılamadığı için düzen onu çevirir. Livewire görünümünde @extends ve @section yazılmaz. Görünüm tek bir kök öğeyle başlar, örnekte <section>.

Sayfaya özel betik

Yalnızca bu sayfada çalışacak bir JavaScript dosyasını page-scripts yığınına ekleyin:

@push('page-scripts')
    @vite('resources/js/pages/customers.js')
@endpush

Düzenler bu yığını sayfanın sonunda basar. Dosyayı Vite girişlerine eklemeyi CSS, JavaScript ve derleme sayfası anlatır.

Yetki

Menü yetki denetimi yapmaz. Yetki gerektiren sayfalarda rotayı kendi ara katmanınızla ya da politikanızla koruyun. Öğeyi menüden gizlemek için Menü sayfasına bakın.

Daha fazlası

• Liste sayfası: sayfayı arama, filtre ve toplu işlemleri olan bir listeye dönüştürün.
• Form penceresi: kayıt ekleme ve düzenleme penceresi.
• Menü: menü dosyasının bütün alanları.
• Düzenler: düzen dosyaları, slot'lar ve prop'lar.