BjLink

Composant Vue pour le lien DSBJ. Rend une balise lien avec les classes .bj-link et des props typées.

Utilisation

<script setup>
import { BjLink } from '@flrxnt/dsbj/vue'
</script>

<template>
  <BjLink href="#">Consulter la démarche</BjLink>
  <BjLink href="#" size="sm">Petit lien</BjLink>
  <BjLink href="#" iconPosition="left">
    <i class="ri-arrow-left-line" aria-hidden="true" />
    Retour
  </BjLink>
</template>

Tailles

Petit lien Consulter la démarche Grand lien

<BjLink href="#" size="sm">Petit lien</BjLink>
<BjLink href="#">Lien taille md (défaut)</BjLink>
<BjLink href="#" size="lg">Grand lien</BjLink>

Icônes

Retour Continuer

<BjLink href="#" iconPosition="left">
  <i class="ri-arrow-left-line" aria-hidden="true" />
  Retour
</BjLink>
<BjLink href="#" iconPosition="right">
  Continuer
  <i class="ri-arrow-right-line" aria-hidden="true" />
</BjLink>

Icônes × tailles

Retour sm Retour md Retour lg Continuer sm Continuer md Continuer lg

<BjLink href="#" size="sm" iconPosition="left">
  <i class="ri-arrow-left-line" aria-hidden="true" />
  Retour sm
</BjLink>
<BjLink href="#" iconPosition="left">
  <i class="ri-arrow-left-line" aria-hidden="true" />
  Retour md
</BjLink>
<BjLink href="#" size="lg" iconPosition="left">
  <i class="ri-arrow-left-line" aria-hidden="true" />
  Retour lg
</BjLink>
<BjLink href="#" size="sm" iconPosition="right">
  Continuer sm
  <i class="ri-arrow-right-line" aria-hidden="true" />
</BjLink>
<BjLink href="#" iconPosition="right">
  Continuer md
  <i class="ri-arrow-right-line" aria-hidden="true" />
</BjLink>
<BjLink href="#" size="lg" iconPosition="right">
  Continuer lg
  <i class="ri-arrow-right-line" aria-hidden="true" />
</BjLink>

Reset

Lien discret (reset) Reset + icône gauche Reset + icône droite

<BjLink href="#" reset>Lien reset sans icône</BjLink>
<BjLink href="#" reset iconPosition="left">
  <i class="ri-file-list-line" aria-hidden="true" />
  Reset + icône gauche
</BjLink>
<BjLink href="#" reset iconPosition="right">
  Reset + icône droite
  <i class="ri-external-link-line" aria-hidden="true" />
</BjLink>

Lien externe

Site externe PDF

<BjLink href="https://example.org" target="_blank" rel="noopener noreferrer">
  Site externe
</BjLink>
<BjLink
  href="https://example.org/doc.pdf"
  target="_blank"
  rel="noopener noreferrer"
  iconPosition="right"
>
  PDF
  <i class="ri-external-link-line" aria-hidden="true" />
</BjLink>

Slot par défaut

Le libellé et les icônes passent par le slot par défaut à l’intérieur du <a>.

Consulter la démarche

Événements

Les écouteurs (ex. @click) s’appliquent à l’ancre via l’héritage des attributs. Utilisez les attributs natifs target, rel, etc. sur BjLink.

<BjLink href="/profil" @click.prevent="onNavigate">Mon profil</BjLink>

Props

Prop	Description
`size`	Taille du texte : sm, md (défaut) ou lg.
`iconPosition`	Disposition d’icône dans le slot : none (défaut), left ou right.
`reset`	Applique bj-link--reset : couleur héritée, soulignement au survol.