BjTile

Tuile cliquable (tag a par défaut) ou statique (tag div) ; disposition horizontale optionnelle. Contenu avec classes bj-tile__icon, bj-tile__title, bj-tile__desc.

Utilisation

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

<template>
  <BjTile href="#" tag="a">
    <i class="ri-file-list-3-line bj-tile__icon" aria-hidden="true" />
    <span class="bj-tile__title">Démarches en ligne</span>
    <span class="bj-tile__desc">Accédez aux formulaires et suivis administratifs.</span>
  </BjTile>
</template>

Aperçu

Démarches en ligneAccédez aux formulaires et suivis administratifs.

horizontal

Démarches en ligneAccédez aux formulaires et suivis administratifs.

<BjTile href="#" horizontal tag="a">
  <i class="ri-file-list-3-line bj-tile__icon" aria-hidden="true" />
  <span class="bj-tile__title">Horizontal</span>
  <span class="bj-tile__desc">Icône et texte alignés.</span>
</BjTile>

Balise tag (a ou div)

tag aLien cliquable

tag divBloc statique

<!-- Lien (défaut tag="a") -->
<BjTile href="/demarches" tag="a">…</BjTile>

<!-- Conteneur statique -->
<BjTile tag="div" role="group" aria-label="Tuiles">…</BjTile>

Combinaisons

horizontal + aCombinaison

horizontal + divStatique

<BjTile href="#" horizontal tag="a">
  <i class="ri-government-line bj-tile__icon" aria-hidden="true" />
  <span class="bj-tile__title">horizontal + lien</span>
  <span class="bj-tile__desc">Combinaison fréquente.</span>
</BjTile>

<BjTile tag="div" horizontal>
  <i class="ri-settings-3-line bj-tile__icon" aria-hidden="true" />
  <span class="bj-tile__title">horizontal + div</span>
  <span class="bj-tile__desc">Bloc non cliquable.</span>
</BjTile>

Slot par défaut

Structure libre : en général icône Remix, titre et description.

<BjTile href="#" tag="a">
  <i class="ri-star-line bj-tile__icon" aria-hidden="true" />
  <span class="bj-tile__title">Favoris</span>
  <span class="bj-tile__desc">Accès rapide</span>
  <span class="bj-badge bj-badge--sm">3</span>
</BjTile>

Props

Prop	Description
`horizontal`	Si vrai, icône et textes sur une ligne.
`tag`	a (défaut) pour lien ; div pour bloc non navigable.