تخطّي إلى المحتوى الرئيسي

مسار التنقل Breadcrumb

يعرض موضع الصفحة الحالية داخل الهيكل الهرمي، ويتيح التنقل للأعلى مستوى تلو الآخر.

الاستخدام الأساسي​

الاستخدام الأساسي
import { LhBreadcrumb, LhBreadcrumbItem } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhBreadcrumb>
      <LhBreadcrumbItem to="/">الرئيسية</LhBreadcrumbItem>
      <LhBreadcrumbItem to="/components">المكوّنات</LhBreadcrumbItem>
      <LhBreadcrumbItem>مسار التنقل</LhBreadcrumbItem>
    </LhBreadcrumb>
  )
}

خصائص Breadcrumb​

خاصيةالوصفالنوعالقيم المتاحةالافتراضي
separatorحرف الفاصلstring—'/'
maxItemsالحد الأقصى للعناصر المرئية، وما يزيد يُطوى إلى (أول عنصر + علامة حذف + آخر عنصر)number—0 (بدون طي)
sxخصائص التخطيط السريعSxProps——

خصائص BreadcrumbItem​

خاصيةالوصفالنوعالافتراضي
toعنوان الوجهة، يُعرض كرابط عند وجوده وعدم كونه العنصر الأخيرstring—
replaceيُحتفظ به لتوافق plus API، وتنقل <a> الأصلي في React لا يتأثر بهذا المفتاحbooleanfalse
childrenالنصReactNode—
مُتحكم به / غير مُتحكم به

حالة الطي حال داخلية: ينقر المستخدم على زر علامة الحذف لتوسيع كل العناصر دون أي تدخل خارجي. تمرير maxItems بقيمة 0 (أو حذفه) يعني عدم الطي.

قيد العقد الفرعية

يجب أن يكون children عناصر LhBreadcrumbItem مباشرة (يمكن عرضها باستخدام .map)، ولا يمكن تغليفها بمكوّن مخصص — فالمكوّن الأب يحقن الفهارس بتصفية أنواع العناصر الفرعية عبر Children.toArray، والتغليف يفشل حقن الفهرس. يتسق هذا مع قيد النزول collectPaneVnodes في lh-ui-plus.

التوصيل بالموجّه (router)

لا يوجد موجّه عام في منظومة React، لذا تُعرض الروابط كعناصر <a> أصلية تتنقل مباشرة. عند التوصيل مع React Router، اعترض onClick واستدعِ navigate، أو اعرض <Link> خاصًا بك بدلًا من استخدام to.

إمكانية الوصول​

العنصر الجذر هو <nav aria-label> والقائمة <ol>؛ ويُخرج العنصر الأخير aria-current="page"، ويزر علامة الحذف يحمل aria-label (من حزمة اللغة breadcrumb.more).

ref​

forwardRef<HTMLElement> — العنصر الجذر <nav>. ويُمرر LhBreadcrumbItem ما يقابل HTMLLIElement.

الأنماط​

import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/breadcrumb'