PageHeader

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

PageHeader.tsx

Storybook

PageHeader · Playground

PageHeader, @bigbang/ui paketindedir.

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

<PageHeader
  title="Sayfa başlığı"
  breadcrumbs={[{ label: 'Ana sayfa', href: '/' }, { label: 'Sayfa başlığı' }]}
  actions={<Button>Birincil buton</Button>}
/>;

Özellikler

titleZorunlu

Açıklama

Sayfa başlığı; sayfanın başlığı olarak çizilir. Sayfada bir tane olsun.

Tür

string

description

Açıklama

Başlığın altında, sayfanın ne için olduğunu söyleyen bir ya da iki cümle.

Tür

string

breadcrumbs

Açıklama

Başlığın üstünde gösterilen konum izi. Son öğe geçerli sayfadır.

Tür

readonly BreadcrumbItem[]

back

Açıklama

Konum izi yokken başlığın üstünde gösterilen üst sayfaya dönüş bağlantısı; örneğin listeden açılan bir ayrıntı sayfasında.

Tür

{ href: string; label: string; }

meta

Açıklama

Başlığın yanında durum bilgisi, örneğin bir Badge.

Tür

ReactNode

actions

Açıklama

Sayfa işlemleri: en fazla bir birincil ve iki ikincil Button. Dar ekranda başlığın altına geçer.

Tür

ReactNode

loading

Açıklama

Sayfa verisi yüklenirken başlık yerine yer tutucu gösterir; başlık gelince yumuşakça belirir.

Tür

boolean

Varsayılan

false

size

Açıklama

Başlık boyutu: üst düzey sayfalar için lg, iç sayfalar ve paneller için md.

Tür

'md' | 'lg'

Varsayılan

'lg'

headingLevel

Açıklama

Başlığın düzeyi. Başlık başka bir sayfa bölgesinin içinde değilse 1 bırakın.

Tür

1 | 2 | 3

Varsayılan

1

render

Açıklama

Konum izi ve dönüş bağlantılarını yönlendiricinin bağlantı bileşeniyle çizer.

Tür

ReactElement | ComponentRenderFn<HTMLProps, {}>

className

Açıklama

Yalnızca yerleşim için: dış boşluk ve konum.

Tür

string

Veri öznitelikleri

• data-component="page-header": kökte.
• data-part="title-skeleton": yüklenirken yer tutucuda.
• aria-busy="true": yüklenirken kökte.