Fil d'Ariane

Affiche le chemin de la page courante dans la hiérarchie. Prise en charge des séparateurs personnalisés, du repli des longs chemins et de la navigation par lien.

Fil d'Ariane

<template>
  <div class="demo-col" style="max-width: 640px; gap: 20px">
    <LhBreadcrumb>
      <LhBreadcrumbItem>Accueil</LhBreadcrumbItem>
      <LhBreadcrumbItem>Peinture des Song</LhBreadcrumbItem>
      <LhBreadcrumbItem :to="'#'">Fan Kuan</LhBreadcrumbItem>
      <LhBreadcrumbItem>Voyageurs parmi les montagnes et les rivières</LhBreadcrumbItem>
    </LhBreadcrumb>
    <LhBreadcrumb separator="/">
      <LhBreadcrumbItem>Accueil</LhBreadcrumbItem>
      <LhBreadcrumbItem :to="'#'" replace>Rouleau de paysage</LhBreadcrumbItem>
      <LhBreadcrumbItem>Page courante</LhBreadcrumbItem>
    </LhBreadcrumb>
    <p class="demo-note">maxItems replie les longs chemins (premier élément + points de suspension + derniers éléments)</p>
    <LhBreadcrumb :max-items="3">
      <LhBreadcrumbItem>Accueil</LhBreadcrumbItem>
      <LhBreadcrumbItem>Collection</LhBreadcrumbItem>
      <LhBreadcrumbItem>dynastie Song</LhBreadcrumbItem>
      <LhBreadcrumbItem>Fan Kuan</LhBreadcrumbItem>
      <LhBreadcrumbItem>Voyageurs parmi les montagnes et les rivières</LhBreadcrumbItem>
    </LhBreadcrumb>
  </div>
</template>

Breadcrumb Props

Prop	Description	Type	Valeur par défaut
separator	Caractère séparateur	string	—
maxItems	Nombre maximal d'éléments visibles (premier + points de suspension + quelques derniers), repli au-delà ; 0 ou aucune valeur signifie aucun repli	number	—
sx	Raccourci de mise en page sx	—	—

BreadcrumbItem Props

Prop	Description	Type	Valeur par défaut
to	Adresse de destination ; lorsqu'il est défini et que l'élément n'est pas le dernier, le rendu se fait sous forme de lien (navigation routeur si vue-router est détecté, navigation native sinon)	string	—
replace	En cas de navigation via vue-router, utiliser le mode replace ou non (sans effet en l'absence de routeur)	boolean	false

Slots

Slot	Description
BreadcrumbItem default	Texte de l'élément
BreadcrumbItem separator	Séparateur d'un élément (prioritaire sur le separator du parent)