مسیر صفحه — Breadcrumb

مسیر صفحه (Breadcrumb) موقعیت کاربر را در سلسله‌مراتب نشان می‌دهد و امکان بازگشت به سطوح بالاتر را می‌دهد. از و استفاده می‌کند، صفحهٔ فعلی می‌گیرد و جداکنندهٔ شورون در راست‌به‌چپ آینه می‌شود. مستقل از چارچوب لینک است: را به روتر خود بدهید.

وضعیت: beta · لایه: ۳ () · کد:

TSX

import { Breadcrumb } from '@tokapps/tuk';

کی استفاده کنیم

سلسله‌مراتب عمیق (سه سطح و بیشتر)، مثل صفحهٔ جزئیات درون یک بخش.
ناوبری اصلی سایت نیست؛ برای آن است.
مراحل ترتیبی فرایند نیست؛ برای آن است.

نمونهٔ زنده

کد قابل کپی

پایه

TSX

import { Breadcrumb } from '@tokapps/tuk';const items = [  { id: 'home', label: 'خانه', href: '/' },  { id: 'forum', label: 'انجمن ایده‌ها', href: '/forum' },  { id: 'idea', label: 'سیستم رأی‌گیری شفاف' },] as const;export function IdeaCrumbs() {  return <Breadcrumb items={items} />;}

اتصال به روتر

TSX

import Link from 'next/link';import { Breadcrumb } from '@tokapps/tuk';<Breadcrumb  items={items}  renderLink={({ children, ...props }) => <Link {...props}>{children}</Link>}/>;

جداکنندهٔ سفارشی

TSX

<Breadcrumb items={items} separator="/" />

ساختار و پراپ‌ها

پراپ	نوع	توضیح
		هر مورد ، و اختیاری دارد؛ مورد آخر معمولاً ندارد
		پیش‌فرض شورون جهت‌دار
		جایگزین برای روتر
		برچسب ناحیه، پیش‌فرض «مسیر صفحه»
		رفتار چاپ

RTL، کیبورد و صفحه‌خوان

در RTL جداکننده و ترتیب بصری آینه می‌شوند؛ ترتیب DOM همان ترتیب منطقی است.
لینک‌ها با Tab قابل فوکوساند؛ صفحهٔ فعلی با اعلام می‌شود.
جداکننده‌ها هستند تا صفحه‌خوان آن‌ها را نخواند.

صدا، حرکت، چاپ و کاهش حرکت

صدا ندارد.
رفتار چاپ از پراپ تعیین می‌شود.

تغییرات ممنوع

ساختار و را تغییر ندهید.
رنگ خام یا گرادیان در جداکننده مجاز نیست؛ فقط توکن‌های معنایی.

مسیر صفحه — Breadcrumb

وضعیت: beta · لایه: ۳ () · کد:

TSX

import { Breadcrumb } from '@tokapps/tuk';

کی استفاده کنیم

سلسله‌مراتب عمیق (سه سطح و بیشتر)، مثل صفحهٔ جزئیات درون یک بخش.

ناوبری اصلی سایت نیست؛ برای آن است.

مراحل ترتیبی فرایند نیست؛ برای آن است.