Page Header
Sayfa başlığı, metadata, breadcrumb ve aksiyon alanı.
PageHeader.tsx
// ARCHINTEL MİMARİ PANELİ
Bileşen Yönetim Merkezi
Tasarım tokenları, React 19 sunucu bileşenleri ve şema doğrulama süreçlerini tek ekrandan denetleyin.
- Çekirdek Durumu:
- Aktif (Kararlı) |
- Sürüm:
- v2.4.0 |
- Katman:
- Production Ready
Kurulum
shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:
$
npx shadcn@latest add https://ui.cagriozay.com.tr/r/page-header.jsonKullanım Örneği
import { PageHeader } from "@/components/layout/PageHeader"
<PageHeader
title="Proje ayarları"
description="Ekip ve dağıtım seçeneklerini yönetin."
headingLevel={2}
backHref="/projects"
actions={<Button>Kaydet</Button>}
/>Özellikler & Parametreler (API)
| Prop | Tür | Varsayılan | Açıklama |
|---|---|---|---|
| title | ReactNode | — | Sayfa veya bölüm başlığı. |
| eyebrow | ReactNode | — | Başlığın üzerindeki kısa teknik etiket. |
| description | ReactNode | — | Başlığa aria-describedby ile bağlanan açıklama. |
| breadcrumb | ReactNode | — | Başlığın üstündeki sayfa yolu alanı. |
| metadata | PageHeaderMetadataItem[] | — | Semantik definition list olarak gösterilen metadata. |
| actions | ReactNode | — | Mobilde sarılabilen aksiyon grubu. |
| variant | "default" | "card" | "title-block" | "sage" | "default" | Başlık yüzeyinin görsel sunumu. |
| as | "header" | "div" | "section" | "header" | Render edilen kapsayıcı elementi. |
| headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | 1 | Başlığın belge hiyerarşisindeki seviyesi. |
| backLabel | string | "Geri dön" | Geri aksiyonunun erişilebilir etiketi. |
| actionsLabel | string | "Sayfa aksiyonları" | Aksiyon grubunun erişilebilir etiketi. |