مسار التنقل Breadcrumb

تنقّل بمسار هرمي. مبني على دلالة nav + ol الأصلية، وتُعلَّم الصفحة الحالية تلقائيًا بـ aria-current="page" ولا تكون قابلة للنقر؛ مع دعم الفواصل المخصّصة والطي عند التجاوز.

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

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

1. الرئيسية
2. المكوّنات
3. Breadcrumb

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb>
    <LhBreadcrumbItem>الرئيسية</LhBreadcrumbItem>
    <LhBreadcrumbItem>المكوّنات</LhBreadcrumbItem>
    <LhBreadcrumbItem>Breadcrumb</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb>
    <LhBreadcrumbItem>الرئيسية</LhBreadcrumbItem>
    <LhBreadcrumbItem>المكوّنات</LhBreadcrumbItem>
    <LhBreadcrumbItem>Breadcrumb</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

التنقّل بالروابط

تنقّل بالروابط

1. الرئيسية
2. دليل
3. الصفحة الحالية

وضع replace

1. استبدال السجل
2. الصفحة الحالية

<script setup lang="ts">
</script>

<template>
  <!-- تنقّل بالروابط -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/">الرئيسية</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/guide">دليل</LhBreadcrumbItem>
    <LhBreadcrumbItem>الصفحة الحالية</LhBreadcrumbItem>
  </LhBreadcrumb>
  <!-- وضع replace -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/" replace>استبدال السجل</LhBreadcrumbItem>
    <LhBreadcrumbItem>الصفحة الحالية</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <!-- تنقّل بالروابط -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/">الرئيسية</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/guide">دليل</LhBreadcrumbItem>
    <LhBreadcrumbItem>الصفحة الحالية</LhBreadcrumbItem>
  </LhBreadcrumb>
  <!-- وضع replace -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/" replace>استبدال السجل</LhBreadcrumbItem>
    <LhBreadcrumbItem>الصفحة الحالية</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

تُصوَّر العناصر التي مرّر إليها to كعناصر <a>؛ وعند اكتشاف vue-router يتم الانتقال عبر التوجيه (يتحكم replace في استبدال سجلّ المحفوظات)، وإلا بقي التنقّل أصليًا. ويُصوَّر العنصر الأخير دائمًا كنص للصفحة الحالية.

فاصل مخصص

فاصل مخصص

1. الرئيسية
2. المكوّنات
3. فاصل مستقل

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb separator="·">
    <LhBreadcrumbItem to="/">الرئيسية</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/components">المكوّنات</LhBreadcrumbItem>
    <LhBreadcrumbItem>
      <template #separator>➜</template>
      فاصل مستقل
    </LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb separator="·">
    <LhBreadcrumbItem to="/">الرئيسية</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/components">المكوّنات</LhBreadcrumbItem>
    <LhBreadcrumbItem>
      <template #separator>➜</template>
      فاصل مستقل
    </LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

الطي عند التجاوز

الطي عند التجاوز

1. الرئيسية
2. الدليل الأول A
3. الدليل الثاني B
4. الدليل الثالث C
5. الصفحة الحالية

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb :max-items="3">
    <LhBreadcrumbItem to="/">الرئيسية</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a">الدليل الأول A</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b">الدليل الثاني B</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b/c">الدليل الثالث C</LhBreadcrumbItem>
    <LhBreadcrumbItem>الصفحة الحالية</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb :max-items="3">
    <LhBreadcrumbItem to="/">الرئيسية</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a">الدليل الأول A</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b">الدليل الثاني B</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b/c">الدليل الثالث C</LhBreadcrumbItem>
    <LhBreadcrumbItem>الصفحة الحالية</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

عند تجاوز maxItems يُحتفظ بالعنصر الأول + علامة الحذف + عدد من العناصر الأخيرة؛ ويؤدي النقر على علامة الحذف إلى توسيع الكل.

واجهة برمجة تطبيقات Breadcrumb

الخصائص

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

خصائص LhBreadcrumbItem

الخاصية	الوصف	النوع	الافتراضي
to	عنوان الانتقال؛ يُصوَّر كرابط عند وجوده ولغير العنصر الأخير	string	—
replace	ما إذا كان الانتقال عبر vue-router يتم بنمط replace	boolean	false

الفتحات

الفتحة	الوصف	المكوّن المُطبَّق
default	عناصر مسار التنقل	LhBreadcrumb
default	محتوى العنصر	LhBreadcrumbItem
separator	فاصل مخصص (يتجاوز separator العام)	LhBreadcrumbItem

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

• العنصر الجذري هو <nav aria-label> (يأخذ القيمة من حزمة اللغة breadcrumb.label) يلتفّ حول <ol>، والترتيب الدلالي هو ترتيب المستند نفسه
• تُصوَّر الصفحة الحالية (العنصر الأخير) كنص وتُعلَّم تلقائيًا بـ aria-current="page"، ولا تكون قابلة للنقر حتى لو مُرِّر إليها to
• الفاصل aria-hidden="true" ولا يدخل شجرة إمكانية الوصول
• علامة الحذف المطوية هي عنصر <button> حقيقي، وتأخذ قيمة aria-label من حزمة اللغة breadcrumb.more، ويؤدي النقر عليها إلى توسيع الكل

تعريفات الأنواع

بنى TypeScript التي يصدّرها هذا المكوّن خارجيًا (مستخرَجة تلقائيًا من packages/components/breadcrumb/src/types.ts و@lh-ui/share/core/*؛ انقر كل عنصر لعرض التعريف كاملًا؛ وصف الخصائص في جدول الخصائص أعلاه):

LhBreadcrumbProps

export interface LhBreadcrumbProps {
  /** حرف الفاصل */
  separator?: string
  /** أقصى عدد للعناصر المرئية (العنصر الأول + علامة الحذف + عدد من العناصر الأخيرة)، يُطوى ما يتجاوزها؛ 0 أو عدم التمرير يعني عدم الطي */
  maxItems?: number
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhBreadcrumbItemProps

export interface LhBreadcrumbItemProps {
  /** عنوان الانتقال؛ يُصوَّر كرابط عند وجوده ولغير العنصر الأخير (عند اكتشاف vue-router يتم الانتقال عبر التوجيه، وإلا يبقى تنقّلًا أصليًا) */
  to?: string
  /** ما إذا كان الانتقال عبر vue-router يتم بنمط replace (لا تأثير له بدون موجه) */
  replace?: boolean
}