Bileşenler

PageHeader

Sayfanın üstü: konum, başlık, durum, açıklama ve ana işlemler.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz. Pencereyi daraltarak işlemlerin başlığın altına geçişine bakın.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

PageHeader; konum izi, başlık, durum, açıklama ve sayfa işlemlerini bir arada çizer. Başlık sayfanın h1 başlığıdır.

Sayfa başlığı

Etkin

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

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>
        </>
      }
    />
  );
}

Dönüş bağlantısı

Konum izi yokken back başlığın üstüne üst sayfaya dönüş bağlantısı koyar. size="md" iç sayfalar için daha küçük başlık verir.

Listeye dön

Ayrıntı sayfası

Taslak

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

export default function BackLink() {
  return (
    <PageHeader
      size="md"
      title="Ayrıntı sayfası"
      back={{ href: '#', label: 'Listeye dön' }}
      meta={<Badge>Taslak</Badge>}
    />
  );
}

Yükleniyor

loading başlık yerine yer tutucu gösterir; başlık öğesi yerinde kalır ve “Sayfa yükleniyor” olarak okunur. Başlık gelince yumuşakça belirir.

Sayfa yükleniyor

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

export default function Loading() {
  return (
    <PageHeader title="Sayfa başlığı" loading actions={<Button variant="secondary">İkincil buton</Button>} />
  );
}

Açık ve koyu mod

Renkler semantik token’lardan gelir; iki modda ayrı ayar gerekmez.

Sayfa başlığı

Etkin

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

Sayfa başlığı

Etkin

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

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>
        </>
      }
    />
  );
}