メインコンテンツまでスキップ

パンくずリストブロック

Breadcrumbs は MUI ベースのナビゲーショントレイルブロックです。

インストール​

npm install @nodeblocks/frontend-breadcrumb-block@0.3.2

必要なもの​

項目理由
items (optional){ label, url? } 形式のセグメントからパンくずを描画します（デフォルトのパターン）
Breadcrumbs.Item (optional)items の代わりにコンパウンド子要素でパンくずを構成します
onNavigate (optional)クライアントサイドルーティング用に、クリックされたセグメントの href とともに呼び出されます
children (function, optional)defaultBlocks と blockOrder を上書きします
構成モード

最も簡単なパンくずには items prop を使ってください（クイックスタートを参照）。セグメントごとに完全な制御が必要な場合は Breadcrumbs.Item のコンパウンド子要素を使ってください。children が JSX 要素（関数ではない）である場合、items prop は無視されます。defaultBlocks と blockOrder を使う 関数 child を使えば、カスタムキー、順序、リンクではないノードを設定できます。blockOrder ブロックより 前に これらのセグメントを描画したい場合を除き、items は省略してください。MUI は子要素の間に区切り記号を挿入するため、手動で chevron 要素を追加しないでください。

コード例​

ライブエディター
function Example() {
  const [lastEvent, setLastEvent] = React.useState('Ready');

  return (
    <>
      <Breadcrumbs
        items={[{label: 'Home', url: '#home'}, {label: 'Products', url: '#products'}, {label: 'Shoes'}]}
        onNavigate={url => {
          setLastEvent(`Navigate: ${url}`);
        }}
      />
      <div style={{marginTop: 8, fontSize: 12, color: '#666'}}>{lastEvent}</div>
    </>
  );
}
結果
Loading...

重要なプロパティ​

コアプロパティ​

プロパティ型必須デフォルト説明
itemsreadonly { label: ReactNode; url?: string; onClick?: React.MouseEventHandler<HTMLAnchorElement> }[]いいえ-パンくずのセグメント。現在のページでは url を省略し、項目ごとの onClick を任意で指定できます
onNavigate(url: string) => voidいいえ-href / url を持つセグメントがクリックされたときに呼び出されます（ある場合はそのセグメントの onClick の後に実行されます）
maxItemsnumberいいえ8MUI がパンくずを折りたたむ前の最大表示項目数
itemsBeforeCollapsenumberいいえ1折りたたみの省略記号の前に表示する項目数
itemsAfterCollapsenumberいいえ1折りたたみの省略記号の後に表示する項目数

コンテンツプロパティ​

プロパティ型必須デフォルト説明
Breadcrumbs.Item.hrefstringいいえ-リンク先。現在の（リンクではない）セグメントでは省略します
Breadcrumbs.Item.childrenReactNodeはい-セグメントのラベル
Breadcrumbs.Item.componentReact.ElementTypeいいえ'a'リンクのルート要素
Breadcrumbs.Item.onClickReact.MouseEventHandler<HTMLAnchorElement>いいえ-クリックハンドラ。href が文字列の場合は onNavigate も実行されます
separatorReactNodeいいえMUI ChevronRight アイコンセグメント間の区切り記号

レイアウトと構成のプロパティ​

プロパティ型必須デフォルト説明
childrenBlocksOverride | ReactNodeいいえ-Breadcrumbs.Item 要素、または blocks と blockOrder を返す関数オーバーライド
classNamestringいいえ-ルートコンテナのクラス名（デフォルトで nbb-breadcrumb が適用されます）
sxSxPropsいいえ-ルートコンテナ用の MUI システムスタイル

Breadcrumbs は MUI の BreadcrumbsProps（children を除く）を継承し、expandText と slotProps を含みます。オーバーライドなしのデフォルト blockOrder は ['item']（defaultBlockOrder）です。

デフォルト UI ブロック​

ブロックBuilt on備考
Breadcrumbs (root)Breadcrumbsプライマリーバー（bgcolor: primary.main）。separator のデフォルトは ChevronRight
Breadcrumbs.ItemLinkセグメントリンク（nbb-breadcrumb-item）。href を使い、設定されている場合は onNavigate を呼び出します

TypeScript​

import {Breadcrumbs} from '@nodeblocks/frontend-breadcrumb-block';
import type {MouseEventHandler, ReactNode} from 'react';

// エントリポイントから再エクスポートされない BreadcrumbNavItem と同じ形です。
type TrailItem = {
  label: ReactNode;
  url?: string;
  onClick?: MouseEventHandler<HTMLAnchorElement>;
};

const trail: TrailItem[] = [{label: 'Home', url: '/home'}, {label: 'Products', url: '/products'}, {label: 'Shoes'}];

<Breadcrumbs items={trail} onNavigate={url => console.log(url)} />;