@gip-recia/color-palette-picker
v0.0.13
Published
Color Palette Picker
Downloads
327
Keywords
Readme
Esup Color-Palette-Picker
Color-Palette-Picker est un webcomponent s'appuyant sur la librairie Lit pour afficher une modale de sélection de couleur.
Installation
- Installation via npm :
npm install @gip-recia/color-palette-picker
- Importation du composant :
Dans un module JavaScript :
import '@gip-recia/color-palette-picker';
Dans une page HTML :
<script type="module">
import './path/to/color-palette-picker.js'
</script>
Ou directement la verion minifiée :
<script src="./path/to/color-palette-picker.bundle.min.js"></script>
- Ajout du composant sur une page HTML :
const colorPicker = document.createElement('esup-color-palette-picker');
colorPicker.color = '...';
colorPicker.config = {...};
colorPicker.onColorChanged = (color) => ...;
document.body.appendChild(colorPicker);
Paramètres
Le webcomponent Color-Palette-Picker accepte les paramètres suvants :
color
- Couleur (au format hexadecimal) actuellement sélectionnée.config
- Objet contenant la configuration du picker.
Propriétés disponibles :
| Nom | Type | Obligatoire | Description | | ------ | ------ | ----------- | ----------------------------------------------------------------------------------------------------------------------------- | | colors | Array | Oui | Tableau des couleurs sélectionnables (au format hexadecimal). | | lang | String | Non | Langue du composant. Valeur initialement disponible : 'fr', 'en'. Possibilité de rajouter des langues via la propriété labels | | labels | Object | Non | Permet de surcharger les labels affichés ou de définir de nouvelles langues. |
onColorChanged
- Fonction appelée lors de la sélection d'une couleur.
Variables CSS
Par défaut le webcomponent Color-Palette-Picker s'appuie sur les fonts Font-Awesome pour afficher des icônes (via des pseudo-elements). Il est cependant possible de personnaliser les icônes affichées via les propriétés suivantes :
| Nom | Description | | --------------------------- | --------------------------------------------------------------------------------------------- | | --icon-cancel-font-family | Permet de configurer la famille de police de caractères de l'icône d'annulation | | --icon-cancel-font-weight | Permet de configurer poids de la police de caractères de l'icône d'annulation | | --icon-cancel-content | Caractère unicode dans la famille de police de caractères utilisée pour l'icône d'annulation | | --icon-validate-font-family | Permet de configurer la famille de police de caractères de l'icône de validation | | --icon-validate-font-weight | Permet de configurer poids de la police de caractères de l'icône de validation | | --icon-validate-content | Caractère unicode dans la famille de police de caractères utilisée pour l'icône de validation |
Test du webcomponent
Pour tester le webcomponent, exécuter la commande suivante :
npm start
Une page avec le webcomponent est alors disponible à l'adresse http://localhost:8000.