Sayfa başlığı
Sayfanın en üstünde yol haritasını, başlığı, kısa açıklamayı ve sağdaki işlem düğmelerini bir arada gösterir. Liste, form ve ayrıntı sayfalarının hepsinde aynı üst düzeni sağlar.
Temel kullanım
title zorunludur ve sayfanın h1 başlığı olarak çizilir; bu yüzden sayfada bir kez kullanın. description başlığın altına tek satırlık bir açıklama ekler.
<acun:page-header title="Siparişler" description="Kadıköy deposundan çıkan 148 siparişin kargo durumu." />| Prop | Değerler |
|---|---|
title | Sayfa başlığı |
description | Başlığın altındaki açıklama |
İşlemler
actions slot'u başlığın sağına yerleşir; sayfanın ana işlemini en sona koyun. Yer yetmediğinde işlemler başlığın altına iner.
<acun:page-header title="Siparişler" description="Kadıköy deposundan çıkan 148 siparişin kargo durumu.">
<acun:slot:actions>
<acun:button variant="white">Excel'e aktar</acun:button>
<acun:button>Yeni sipariş</acun:button>
</acun:slot:actions>
</acun:page-header>| Prop | Değerler |
|---|---|
actions | Slot; başlığın sağı |
Yol haritası
breadcrumbs verildiğinde başlığın üstünde bir acun:breadcrumb çizilir; öğeler label ile url ya da route alır. Başa anasayfa ikonu kendiliğinden eklenir ve son öğe bağlantısız, bulunulan sayfa olarak gösterilir. İkonun gideceği yeri home-route (rota adı) ya da home-url (adres) ile değiştirin; rota tanımlı değilse site köküne gider.
<acun:page-header
title="Ayşe Yılmaz"
description="MÜŞ-10482 · Kurumsal müşteri"
home-url="#"
:breadcrumbs="[
['label' => 'Müşteriler', 'url' => '#musteriler'],
['label' => 'Kurumsal', 'url' => '#kurumsal'],
['label' => 'Ayşe Yılmaz'],
]"
/>| Prop | Değerler |
|---|---|
breadcrumbs | [['label' => …, 'url' | 'route' => …], …] |
home-route | Rota adı |
home-url | Adres |
Alt içerik
Varsayılan slot açıklamanın altında gösterilir; sayfa sekmeleri ya da filtre düğmeleri için kullanın. Bu örnekte yol haritası, işlemler ve filtreler birlikte kullanıldı.
<acun:page-header
title="Kargolar"
description="Eylül 2026 gönderimleri"
home-url="#"
:breadcrumbs="[['label' => 'Raporlar', 'url' => '#raporlar'], ['label' => 'Kargolar']]"
>
<acun:slot:actions>
<acun:button>Rapor oluştur</acun:button>
</acun:slot:actions>
<div class="flex flex-wrap gap-2">
<acun:button size="sm" variant="soft">Tümü · 3.320</acun:button>
<acun:button size="sm" variant="ghost">Teslim edildi · 3.106</acun:button>
<acun:button size="sm" variant="ghost">Teslim edilemedi · 214</acun:button>
</div>
</acun:page-header>| Prop | Değerler |
|---|---|
varsayılan slot | Açıklamanın altı (sekme, filtre) |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
title | — | Zorunlu; sayfa başlığı (h1) |
description | null | Başlığın altındaki açıklama |
breadcrumbs | [] | acun:breadcrumb öğeleri; boşsa yol haritası çizilmez |
home-route | dashboard | Anasayfa ikonunun rota adı; tanımlı değilse site kökü |
home-url | null | Anasayfa ikonu için doğrudan adres; verilirse home-route kullanılmaz |