Overlays Composants superposees : modales, drawers, dropdowns et menus contextuels.
BcModal Ouvrir la modale
vue < script setup > const modalOpen = ref ( false ) </ script > < BcButton label = "Ouvrir la modale" @ click = " modalOpen = true " /> < BcModal v-model : open = " modalOpen " title = "Confirmer l'action" description = "Cette action est irreversible." > <p>Voulez-vous vraiment supprimer cet element ?</p> </ BcModal > Tailles Taille Largeur Usage sm26.25rem Confirmations simples md35rem Formulaires courts (defaut) lg47.5rem Formulaires complexes, tableaux
Props Prop Type Default Description openbooleanfalseEtat ouvert/ferme (v-model:open) titlestring— Titre de la modale descriptionstring— Description sous le titre closeOnEscapebooleantrueFermer avec Echap closeOnBackdropbooleantrueFermer au clic sur le fond size"sm" | "md" | "lg""md"Taille closeLabelstring"Fermer"Label du bouton de fermeture
Slots Slot Description defaultContenu principal footerPied de modale (par defaut : Annuler + Confirmer)
Accessibilite role="dialog" + aria-modal="true"Focus trappe dans la modale (Tab ne sort pas) Fermeture avec Echap Focus restaure sur l'element declencheur a la fermeture Scroll du body verrouille quand la modale est ouverte BcDrawer Drawer droite Drawer gauche
vue < BcButton label = "Ouvrir" @ click = " drawerOpen = true " /> < BcDrawer v-model : open = " drawerOpen " title = "Details" side = "right" > <p>Contenu du drawer.</p> </ BcDrawer > Props Prop Type Default Description openbooleanfalseEtat ouvert/ferme (v-model:open) titlestring— Titre du drawer side"left" | "right""right"Cote d'apparition closeOnEscapebooleantrueFermer avec Echap closeOnBackdropbooleantrueFermer au clic sur le fond closeLabelstring"Fermer le panneau"Label bouton fermeture
Slots Slot Description titleTitre personnalise defaultContenu principal footerPied du drawer
BcDropdown vue < BcDropdown v-model = " dropdownVal " : options = " dropdownOptions " label = "Pays" placeholder = "Choisir..." /> Props Prop Type Default Description modelValuestring | number | nullnullValeur selectionnee (v-model) optionsDropdownOption[]— Options { value, label } labelstring— Label placeholderstring"Select"Placeholder disabledbooleanfalseDesactive searchablebooleanfalseRecherche integree clearablebooleanfalseBouton d'effacement
Cette page presente les overlays de haut niveau. Pour la documentation complete de BcDropdownMenu (props, events, slots, usages), voir la page canonique : Dropdown Menu .
