BjQuote

Citation en figure avec blockquote ; texte via prop text ou slot (le slot remplace text), auteur et source optionnels, image optionnelle, variante accent.

Utilisation

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

<template>
  <BjQuote accent author="Ministère du numérique" source="Rapport annuel 2024" text="L’accessibilité et la clarté guident chaque service public numérique." />
</template>

accent

L’accessibilité et la clarté guident chaque service public numérique.
Ministère du numériqueRapport annuel 2024
L’accessibilité et la clarté guident chaque service public numérique.
Ministère du numérique
<BjQuote accent text="Citation avec accent." author="Auteur" />
<BjQuote text="Citation sans accent." author="Auteur" />

Prop text et slot

Si le slot par défaut contient du contenu, il remplace entièrement la prop text (le blockquote affiche le slot).

<!-- Slot remplace text -->
<BjQuote accent :author="author" :source="source">
  <em>Citation</em> avec <strong>markup</strong> dans le slot.
</BjQuote>

<!-- Prop text si slot vide -->
<BjQuote text="Citation simple." author="Auteur" />

Auteur et source

<BjQuote text="…" author="Nom seul" />
<BjQuote text="…" author="Nom" source="Ouvrage, 2024" />

Image

L’accessibilité et la clarté guident chaque service public numérique.
Ministère du numériqueRapport annuel 2024
<BjQuote
  image="https://picsum.photos/96/96"
  text="Citation avec portrait."
  author="Prénom Nom"
/>

Exemple complet

<BjQuote
  accent
  image="https://picsum.photos/96/96"
  :text="text"
  :author="author"
  :source="source"
/>

Props

Prop / slotDescription
accentSi vrai, bordure gauche accent (rouge Bénin).
textTexte de citation si le slot par défaut est vide.
authorNom dans figcaption.
sourceRéférence (publication, date) à côté de l’auteur.
imageURL de l’image affichée au-dessus du blockquote.
(default slot)Si le slot par défaut contient du contenu, il remplace entièrement la prop <code>text</code> (le blockquote affiche le slot).