BjDrawer — Vue
Composant Vue 3 pour le tiroir latéral DSBJ, avec gestion du v-model, du focus et des slots.
Utilisation
<script setup>
import { ref } from 'vue'
import { BjDrawer } from '@flrxnt/dsbj/vue'
const open = ref(false)
</script>
<template>
<button class="bj-btn" @click="open = true">Ouvrir</button>
<BjDrawer v-model="open" title="Mon tiroir">
<p>Contenu du tiroir.</p>
<template #footer="{ close }">
<button class="bj-btn bj-btn--tertiary" @click="close">Annuler</button>
<button class="bj-btn">Valider</button>
</template>
</BjDrawer>
</template>Aperçu interactif
Props
| Classe | Description |
|---|---|
modelValue | Contrôle l'ouverture du tiroir (v-model). |
position | Position du tiroir : "left" (défaut) ou "right". |
size | Taille du tiroir : "default", "sm", "lg" ou "full". |
title | Titre affiché dans l'en-tête du tiroir. |
id | Id HTML personnalisé (généré automatiquement sinon). |
Accessibilité
Le composant utilise
role="dialog" et aria-modal="true". Le focus est piégé dans le tiroir. La touche Escape ferme le tiroir.