BeeTag

Une petite étiquette pour qualifier un contenu : une catégorie, un mot-clé, un statut.

import { BeeTag } from "@thaisrr/beedesign";
import "@thaisrr/beedesign/style.css";

Utilisation

Le libellé se place dans le slot par défaut.

Vue 3TypeScriptAccessibilité

<script setup lang="ts">
import { BeeTag } from "@thaisrr/beedesign";
</script>

<template>
  <div class="row">
    <BeeTag>Vue 3</BeeTag>
    <BeeTag>TypeScript</BeeTag>
    <BeeTag>Accessibilité</BeeTag>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
</style>

Forme arrondie

La prop rounded passe le tag en forme de pilule (--bd-radius-full).

Vue 3TypeScriptAccessibilité

<script setup lang="ts">
import { BeeTag } from "@thaisrr/beedesign";
</script>

<template>
  <div class="row">
    <BeeTag rounded>Vue 3</BeeTag>
    <BeeTag rounded>TypeScript</BeeTag>
    <BeeTag rounded>Accessibilité</BeeTag>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
</style>

Dans une carte

Atelier d'écriture

Un jeudi sur deux, de 18h à 20h, à la médiathèque.

FictionDébutantsGratuit

<script setup lang="ts">
import { BeeCard, BeeTag } from "@thaisrr/beedesign";
</script>

<template>
  <BeeCard :elevation="1" class="card">
    <h3 class="title">Atelier d'écriture</h3>
    <p class="text">Un jeudi sur deux, de 18h à 20h, à la médiathèque.</p>
    <div class="tags">
      <BeeTag rounded>Fiction</BeeTag>
      <BeeTag rounded>Débutants</BeeTag>
      <BeeTag rounded>Gratuit</BeeTag>
    </div>
  </BeeCard>
</template>

<style scoped>
.card {
  max-width: 24rem;
}

.title {
  margin: 0;
  font-size: 1.125rem;
}

.text {
  margin: 0.5rem 0 1rem;
  color: var(--bd-color-text-muted);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
</style>

API

Props

Nom	Type	Défaut	Description
rounded	boolean	false	Tag en forme de pilule.

Slots

Nom	Description
default	Libellé du tag.

Variables CSS utilisées

--bd-color-primary-light, --bd-color-primary-medium, --bd-color-primary-dark, --bd-font-main, --bd-font-size-sm, --bd-radius-sm, --bd-radius-full. --bd-border-width,