Info-Modal est un webcomponent s'appuyant sur la librairie Lit pour afficher une modale d'information.
- Installation via npm :
npm install @gip-recia/info-modal- Importation du composant :
Dans un module JavaScript :
import '@gip-recia/info-modal';
Dans une page HTML :
<script src="./path/to/info-modal.min.js"></script>- Ajout du component sur une page HTML :
const infoModal = document.createElement('info-modal');
document.body.appendChild(infoModal);Propriétés disponibles :
| Nom | Type | Obligatoire | Description |
|---|---|---|---|
| titleModal | string | non | Le titre de la modale |
| debug | boolean | non | Un booléen qui permet d'afficher les retour console ou non |
| mainElement | HTMLElement | oui | Balise main du DOM (la modale gère la navigation clavier dans le DOM) |
<info-modal
titleModal=""
debug
/>Plusieurs variables CSS peuvent être définis pour personnaliser le webcomponent :
| Nom | Description |
|---|---|
| --info-modal-background-modal-container-color | Couleur de fond de la modale |
| --info-modal-background-modal-overlay-color | Couleur d'arrière plan (donne le "focus visuel" à la modale) |