Breadcrumbs

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

Breadcrumbs.tsx

Storybook

Breadcrumbs · Playground

Breadcrumbs tek parçadır ve @bigbang/ui paketindedir. BreadcrumbItem türü de dışa aktarılır.

import { Breadcrumbs, type BreadcrumbItem } from '@bigbang/ui';

const items: BreadcrumbItem[] = [
  { label: 'Ana sayfa', href: '/' },
  { label: 'Birinci düzey', href: '/first' },
  { label: 'Geçerli sayfa' },
];

<Breadcrumbs items={items} />;

Özellikler

itemsZorunlu

Açıklama

Üst düzeyden geçerli sayfaya kadar sayfalar. Geçerli sayfa en sonda gelir ve bağlantı değildir.

Tür

readonly BreadcrumbItem[]

maxItems

Açıklama

Aradaki öğeler "…" butonuna katlanmadan önce gösterilen en fazla öğe sayısı. İlk öğe ve son maxItems - 1 öğe görünür kalır.

Tür

number

Varsayılan

4

label

Açıklama

Gezinme bölgesinin adı. Verilmezse ui.breadcrumbs.label metni kullanılır ("Konum" ya da "Breadcrumb").

Tür

string

render

Açıklama

Her bağlantıyı yönlendiricinin bağlantı bileşeniyle çizer, örneğin <RouterLink to="..." />; adres denetimi yine uygulanır.

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: breadcrumbs (kök nav öğesinde).
• data-part: separator (ayırıcı simge kabı).
• data-revealed: “…” düğmesiyle açılan öğelerde.