PageHeader

Ne zaman kullanılır

PageHeader her sayfanın üstündedir: kullanıcıya nerede olduğunu, sayfanın ne olduğunu ve burada yapılabilecek ana işlemleri söyler. Liste, ayrıntı ve ayar sayfalarında aynı yapıyı kullanın.

Ne zaman kullanılmaz

• Sayfa içindeki bölümler için: Bölüm başlıkları için Heading kullanın.
• Diyalog ve çekmeceler için: Onların kendi başlık alanı vardır.
• Uygulamanın üst çubuğu için: Hesap ve dil menüleri AppShell üst çubuğundadır.

Anatomi

1. Ana sayfa
2. Birinci düzey
3. Sayfa başlığı

Birinci düzey

Sayfa başlığı

Etkin

Sayfanın ne için olduğunu anlatan bir ya da iki cümlelik açıklama.

İkincil butonBirincil buton

AçıkKoyu

Kodu kopyala

import { Badge, Button, PageHeader } from '@bigbang/ui';

export default function Default() {
  return (
    <PageHeader
      title="Sayfa başlığı"
      description="Sayfanın ne için olduğunu anlatan bir ya da iki cümlelik açıklama."
      breadcrumbs={[{ label: 'Ana sayfa', href: '#' }, { label: 'Birinci düzey', href: '#first' }, { label: 'Sayfa başlığı' }]}
      meta={<Badge tone="success">Etkin</Badge>}
      actions={
        <>
          <Button variant="secondary">İkincil buton</Button>
          <Button>Birincil buton</Button>
        </>
      }
    />
  );
}

1. Konum izi ya da dönüş bağlantısı: Breadcrumbs ya da back bağlantısı.
2. Başlık: Varsayılan h1; uzun başlıklar satır kırar.
3. Durum (meta): Başlığın yanında, örneğin bir Badge.
4. Açıklama: Bir ya da iki cümle, soluk metin.
5. İşlemler: En fazla bir birincil ve iki ikincil buton; sağda durur.

Davranış

• Geniş ekranda işlemler başlığın sağındadır; yer kalmayınca alta geçer. 640 px altında işlemler tam genişlik alır ve alanı eşit böler.
• loading iken başlık yerine parlayan bir yer tutucu görünür; başlık öğesi yerinde kalır ve yükleniyor metniyle okunur. Durum gizlenir.
• Başlık geldiğinde yumuşakça belirir; hareketi azaltma tercihinde yalnızca kısa bir solma kalır.
• Konum izi uzunsa ortası katlanır; davranış Breadcrumbs’tan gelir.

Yönergeler

• Her sayfada tek bir PageHeader ve tek bir h1 olsun.
• Başlık sayfanın adıdır; konum izinin son öğesiyle aynı olsun.
• Birincil işlem en sağdadır; diğer işlemleri ikincil ya da üçüncül yapın.
• Açıklamayı yalnızca sayfanın amacı belli değilse yazın.

İçerik

• Başlık bir ad öbeğidir; nokta konmaz.
• Açıklama tam cümledir ve nokta ile biter.

Türkçe	İngilizce
Sayfa başlığı	Page title
Listeye dön	Back to list
Ayrıntı sayfası	Detail page

İlgili bileşenler

• Breadcrumbs: Başlığın üstündeki konum izi.
• Tabs: Başlığın altında sayfa bölümleri.
• Button: Sayfa işlemleri.
• AppShell: Sayfanın içinde durduğu çerçeve.