Brickslab.Toolsv2.1.1

@brickslab./ui-web

Annotation SVG animée sur du texte — soulignement, encadrement, cercle, barré ou surlignage. Animation draw/fill configurable avec déclencheur view, hover ou manual.

Types d'annotation

highlight · underline · box · circle · strike

highlightunderlineboxstrike

Hover

trigger="hover" — survolez le texte

Soulignement hoverSurlignage hover

Props

PropTypeDéfautRequisDescription
childrenReactNode—✓Texte ou contenu à annoter.
action"highlight" | "underline" | "box" | "circle" | "strike""underline"—Type d'annotation.
colorstring"#F59E0B"—Couleur de l'annotation.
strokeWidthnumber3—Épaisseur du trait SVG.
durationnumber0.6—Durée de l'animation en secondes.
trigger"view" | "hover" | "manual""view"—Déclencheur de l'animation.
startOnViewbooleantrue—Déclenche à l'entrée dans le viewport.
reducedMotion"auto" | "always" | "never""auto"—Désactive l'animation si réduit.
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  children={<span>...</span>}
  action="underline"
  color="#F59E0B"
  strokeWidth={3}
  duration={0.6}
  trigger="view"
  startOnView={true}
  reducedMotion="auto"
/>
childrenactioncolorstrokeWidthdurationtriggerstartOnViewreducedMotion
Override texte: taille + couleur

Exemple cible pour personnaliser la taille et la couleur du texte avec les props disponibles sur ce composant.

<div style={{ fontSize: "var(--fontsize-lg)" }}>
  <MyComponent
    color="var(--color-brand)"
  />
</div>

Utilisation

tsx
import { TextHighlighter } from "@brickslab./ui-web";

// Soulignement animé
<TextHighlighter action="underline">
  Mot important
</TextHighlighter>

// Encadrement
<TextHighlighter action="box" color="#CC4A48">
  Encadré en rouge
</TextHighlighter>

// Surlignage au survol
<TextHighlighter action="highlight" trigger="hover" color="#F59E0B">
  Surlignage hover
</TextHighlighter>