Une fenêtre modale, également appelée dialogue, est une fenêtre pop-up qui apparaît au-dessus du contenu principal d’un site ou d’une application. Elle nécessite généralement une action de l’utilisateur avant que celui-ci puisse retourner au contenu principal. Les fenêtres modales sont couramment utilisées pour afficher des messages importants, des alertes, des formulaires interactifs.
Demo
Subscribe to our Newsletter
Join thousands getting emails in their inbox.
Code
Documentation
Installation
Suivez les étapes ci-dessous pour installer et utiliser le composant ip-modal dans votre projet.
Étape 1
Installez le composant ip-modal en tant que dépendance dans votre projet :
npm install ip-accordion
Étape 2
Importez le module dans votre fichier script :
Utilisation
Pour utiliser ce composant, ajoutez les propriétés sous forme d’attributs.
Propriétés
Propriété
Attribut
Nécessité
Description
string
Valeur par défaut
buttonText
button-text
Requise
Le texte à afficher sur le bouton de déclenchement
string
Open modal
closeAriaLabel
close-aria-label
Requise
Le texte aria-label pour le bouton de fermeture
string
Close the dialog
Contenu
Le contenu de la fenêtre modale doit être inséré en utilisant l’attribut slot="content"
Exemple
Personnalisation
Variables CSS
Nous disposons d’un ensemble de variables CSS prédéfinies permettant de personnaliser la modale :
--svg-color
--svg-size
Class
Plusieurs classes peuvent être utilisées pour personnaliser davantage l'apparence :
dialog-content: pour le conteneur de la fenêtre modale
trigger-button: pour le bouton d’ouverture de la modale
