BjMarquee

Bandeau défilant React : les enfants sont dupliqués dans la piste pour une boucle visuelle ; vitesse, sens, bordure et bouton pause sont configurables.

Utilisation

import { BjMarquee } from '@flrxnt/dsbj/react'

export function Example() {
  return (
    <BjMarquee speed="default" reverse={false} bordered={false} pausable>
      <span className="bj-marquee__item">Annonce importante — </span>
      <span className="bj-marquee__item">Nouveauté sur le portail — </span>
    </BjMarquee>
  )
}

speed : slow, default, fast

bj-marquee--slow

slow — slow —

bj-marquee--fast

fast — fast —

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

reverse : sens inverse

reverse — reverse —

<BjMarquee reverse>
  <span className="bj-marquee__item">Sens inverse — </span>
</BjMarquee>

bordered : bordures

bordered — bordered —

<BjMarquee bordered>
  <span className="bj-marquee__item">Bandeau encadré — </span>
</BjMarquee>

pausable : avec ou sans bouton pause

Sans bouton (aperçu statique) — Sans bouton —

<BjMarquee pausable={false}>
  <span className="bj-marquee__item">Sans bouton pause — </span>
</BjMarquee>

Combinaisons (speed + reverse + bordered)

Urgent — Info — Urgent — Info —

import { BjMarquee } from '@flrxnt/dsbj/react'

export function MarqueeCombo() {
  return (
    <BjMarquee speed="fast" reverse bordered className="my-marquee">
      <span className="bj-marquee__item">Urgent — </span>
      <span className="bj-marquee__item">Info — </span>
    </BjMarquee>
  )
}

Aperçu

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

Props

Prop	Description
`speed`	Vitesse d’animation : slow, default (défaut) ou fast.
`reverse`	Inverse le sens du défilement.
`bordered`	Ajoute des bordures haut et bas.
`pausable`	Affiche le bouton pause ou reprise (true par défaut).
`children`	Contenu défilant (dupliqué dans la piste pour la boucle).
`className`	Classe sur la racine .bj-marquee.