BjBanner
Bannière hero : size (sm / md défaut / lg), align (left défaut / center / right), theme (light / dark défaut / green / yellow / red / plain), image, title, text, slot #actions et slot par défaut dans le corps.
Utilisation
<script setup>
import { BjBanner } from '@flrxnt/dsbj/vue'
</script>
<template>
<BjBanner
size="md"
align="left"
theme="green"
title="Services en ligne"
text="Sous-titre de la bannière."
>
<template #actions>
<a class="bj-btn bj-btn--contrast" href="#">Action</a>
</template>
</BjBanner>
</template>Aperçu
size
sm
md
lg
align
left
center
right
theme
light
dark
green
yellow
red
plain
Combinaisons align × theme (size md)
Chaque carte : align (ligne) × theme (colonne), size md.
Image de fond
<BjBanner
size="lg"
align="center"
theme="dark"
:image="imageUrl"
title="Titre"
text="Sous-titre"
/>Slot #actions
Slot par défaut
<BjBanner title="Titre" text="Texte">
<template #actions>
<button type="button" class="bj-btn">OK</button>
</template>
<p>Contenu slot défaut sous les actions</p>
</BjBanner>Props
| Prop | Description |
|---|---|
size | sm, md (défaut) ou lg. |
align | left (défaut), center ou right. |
theme | light, dark (défaut), green, yellow, red ou plain. |
image | URL d’image pour le fond (couche .bj-banner__img). |
title | Titre principal. |
text | Texte d’introduction. |
#actions | Boutons ou liens dans .bj-banner__actions. |
default | Contenu additionnel dans .bj-banner__body après les actions. |