BjTag

Composant Vue pour le tag DSBJ. Variantes, taille, élément sémantique (span, lien, bouton) et fermeture optionnelle.

Utilisation

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

<template>
  <BjTag variant="default" size="md" tag="span">Étiquette</BjTag>
  <BjTag variant="info" :dismissible="true" @dismiss="onDismiss">Fermable</BjTag>
</template>

Variantes

Défaut

<BjTag variant="default" tag="span">Défaut</BjTag>

Action

<BjTag variant="action" tag="span">Action</BjTag>

Info

<BjTag variant="info" tag="span">Info</BjTag>

Succès

<BjTag variant="success" tag="span">Succès</BjTag>

Attention

<BjTag variant="warning" tag="span">Attention</BjTag>

Erreur

<BjTag variant="error" tag="span">Erreur</BjTag>

Tailles

PetitMoyen

<BjTag size="sm" tag="span">Petit</BjTag>
<BjTag size="md" tag="span">Moyen</BjTag>

Éléments HTML

SpanLien

<BjTag tag="span">Span (défaut)</BjTag>
<BjTag tag="a" href="#">Lien tag</BjTag>
<BjTag tag="button" type="button">Bouton tag</BjTag>

Tags fermables

Préférez tag="span" avec dismissible pour éviter du HTML invalide (pas de bouton dans un lien ou un autre bouton).

Défaut Action Info Succès Attention Erreur

<BjTag variant="default" dismissible @dismiss="onDismiss">Défaut</BjTag>
<BjTag variant="action" dismissible @dismiss="onDismiss">Action</BjTag>
<BjTag variant="info" dismissible @dismiss="onDismiss">Info</BjTag>
<BjTag variant="success" dismissible @dismiss="onDismiss">Succès</BjTag>
<BjTag variant="warning" dismissible @dismiss="onDismiss">Attention</BjTag>
<BjTag variant="error" dismissible @dismiss="onDismiss">Erreur</BjTag>

Variantes × tailles × fermable

Info sm × Info md × Warning smWarning md Err sm × Err md × Action sm Action md × OK sm × OK md × Def sm × Def md ×

<BjTag variant="info" size="sm" dismissible @dismiss="onDismiss">Info sm</BjTag>
<BjTag variant="info" size="md" dismissible @dismiss="onDismiss">Info md</BjTag>
<BjTag variant="warning" size="sm">Warning sm</BjTag>
<BjTag variant="warning" size="md">Warning md</BjTag>
<BjTag variant="error" size="sm" dismissible @dismiss="onDismiss">Err sm</BjTag>
<BjTag variant="error" size="md" dismissible @dismiss="onDismiss">Err md</BjTag>
<BjTag variant="action" size="sm">Action sm</BjTag>
<BjTag variant="action" size="md" dismissible @dismiss="onDismiss">Action md</BjTag>
<BjTag variant="success" size="sm" dismissible @dismiss="onDismiss">OK sm</BjTag>
<BjTag variant="success" size="md" dismissible @dismiss="onDismiss">OK md</BjTag>
<BjTag variant="default" size="sm" dismissible @dismiss="onDismiss">Def sm</BjTag>
<BjTag variant="default" size="md" dismissible @dismiss="onDismiss">Def md</BjTag>

Slot par défaut

Slot personnalisé

<BjTag variant="info" tag="span">
  <i class="ri-price-tag-3-line" aria-hidden="true" style="margin-right: 0.25rem" />
  Slot personnalisé
</BjTag>

Événements

Au clic sur le bouton de fermeture, le composant émet dismiss (sans retirer le nœud du DOM : gérez la liste côté parent).

function onDismiss() {
  console.log('Tag dismissed')
}

Props

Prop	Description
`variant`	Variante : default (défaut), action, info, success, warning ou error.
`size`	Taille : md (défaut) ou sm.
`dismissible`	Affiche le bouton de retrait et émet dismiss au clic.
`tag`	Élément racine : span (défaut), a ou button.