@gip-recia/info-modal

Info-Modal

Info-Modal est un webcomponent s'appuyant sur la librairie Lit pour afficher une modale d'information.

• Info-Modal
  • Installation
  • Paramètres
  • Variables CSS
    • Modification de style

Installation

1. Installation via npm :

npm install @gip-recia/info-modal

1. 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>

1. Ajout du component sur une page HTML :

const infoModal = document.createElement('info-modal');
document.body.appendChild(infoModal);

Paramètres

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
/>

Variables CSS

Modification de style

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)