مسار التنقل Breadcrumb

يعرض مسار الصفحة الحالية ضمن التسلسل الهرمي. يدعم فاصلًا مخصصًا، وطيّ السلاسل الطويلة، والقفز عبر الروابط.

مسار التنقل

<template>
  <div class="demo-col" style="max-width: 640px; gap: 20px">
    <LhBreadcrumb>
      <LhBreadcrumbItem>الرئيسية</LhBreadcrumbItem>
      <LhBreadcrumbItem>لوحات سلالة سونغ</LhBreadcrumbItem>
      <LhBreadcrumbItem :to="'#'">فان كوان</LhBreadcrumbItem>
      <LhBreadcrumbItem>لوحة رحلة في الجبال والوديان</LhBreadcrumbItem>
    </LhBreadcrumb>
    <LhBreadcrumb separator="/">
      <LhBreadcrumbItem>الرئيسية</LhBreadcrumbItem>
      <LhBreadcrumbItem :to="'#'" replace>لفافة المناظر الطبيعية</LhBreadcrumbItem>
      <LhBreadcrumbItem>الصفحة الحالية</LhBreadcrumbItem>
    </LhBreadcrumb>
    <p class="demo-note">يطوي maxItems السلاسل الطويلة (العنصر الأول + علامة الحذف + العناصر الأخيرة)</p>
    <LhBreadcrumb :max-items="3">
      <LhBreadcrumbItem>الرئيسية</LhBreadcrumbItem>
      <LhBreadcrumbItem>المجموعة</LhBreadcrumbItem>
      <LhBreadcrumbItem>سلالة سونغ</LhBreadcrumbItem>
      <LhBreadcrumbItem>فان كوان</LhBreadcrumbItem>
      <LhBreadcrumbItem>لوحة رحلة في الجبال والوديان</LhBreadcrumbItem>
    </LhBreadcrumb>
  </div>
</template>

Breadcrumb Props

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

BreadcrumbItem Props

خاصية	الوصف	النوع	الافتراضي
to	عنوان القفز؛ عند وجوده وعدم كون العنصر أخيرًا يُعرض كرابط (عند اكتشاف vue-router يتم القفز عبر المسار، وإلا فالتنقّل الأصلي)	string	—
replace	هل يستخدم القفز عبر vue-router طريقة replace (بلا تأثير عند غياب المسار)	boolean	false

Slots

فتحة	الوصف
BreadcrumbItem default	نص العنصر
BreadcrumbItem separator	فاصل العنصر الواحد (يسبق فاصل المستوى الأب)