BjMarquee

Composant Vue pour le bandeau défilant DSBJ. Le slot par défaut est dupliqué en interne pour une boucle ; speed, reverse, bordered et pausable modulent le rendu et le comportement.

Utilisation

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

<template>
  <BjMarquee speed="default" :reverse="false" :bordered="false" :pausable="true">
    <span class="bj-marquee__item">Annonce importante — </span>
    <span class="bj-marquee__item">Nouveauté sur le portail — </span>
  </BjMarquee>
</template>

Aperçu (HTML)

Annonce importante — Nouveauté sur le portail — Annonce importante — Nouveauté sur le portail —

speed : slow, default, fast

<BjMarquee speed="slow">…</BjMarquee>
<BjMarquee speed="default">…</BjMarquee>
<BjMarquee speed="fast">…</BjMarquee>

reverse, bordered, pausable

<!-- reverse : false (défaut) ou true -->
<BjMarquee :reverse="false">…</BjMarquee>
<BjMarquee :reverse="true">…</BjMarquee>

<!-- bordered -->
<BjMarquee :bordered="true">…</BjMarquee>

<!-- Sans bouton pause -->
<BjMarquee :pausable="false">…</BjMarquee>

Exemples croisés

<!-- Vitesses × sens × bordure (extraits) -->
<BjMarquee speed="fast" :reverse="true" :bordered="true">
  <span class="bj-marquee__item">Flash inverse encadré — </span>
</BjMarquee>

<BjMarquee speed="slow" :bordered="true" :pausable="false">
  <span class="bj-marquee__item">Bandeau discret sans pause — </span>
</BjMarquee>

Matrice speed × reverse × bordered × pausable

Toutes les booléennes sont indépendantes ; pausable=false masque le bouton pause (le défilement reste géré par CSS).

<!-- slow / default / fast × reverse × bordered × pausable -->
<BjMarquee speed="slow" :reverse="false" :bordered="false" :pausable="true">…</BjMarquee>
<BjMarquee speed="slow" :reverse="true" :bordered="true" :pausable="false">…</BjMarquee>
<BjMarquee speed="default" :reverse="false" :bordered="true" :pausable="true">…</BjMarquee>
<BjMarquee speed="fast" :reverse="true" :bordered="false" :pausable="true">…</BjMarquee>

Fast reverse — Fast reverse —

Événements Vue

Pas d’emit : la pause est locale (classe bj-marquee--paused) ; pas d’événement vers le parent.

v-model

Pas de v-model : vitesse et sens sont des props, pas un état bidirectionnel.

Slot par défaut

Slot	Description
`default`	Contenu défilant (répété deux fois dans le track pour la boucle).

Props

Prop	Description
`speed`	Vitesse : slow, default (défaut), fast → bj-marquee--slow
`reverse`	Sens inversé (bj-marquee--reverse).
`bordered`	Bordures haut/bas (bj-marquee--bordered).
`pausable`	Affiche le bouton pause/reprise (défaut true) ; false masque le contrôle.