- Installation via npm :
npm install @gip-recia/ui-ressouces-gar- Importation du composant :
Dans un module JavaScript :
import '@gip-recia/ui-ressouces-gar';Dans une page HTML :
<script src="./path/to/ui-ressouces-gar.min.js"></script>- Ajout du composant sur une page HTML :
const uiRessourcesGar = document.createElement('ui-ressouces-gar');
document.body.appendChild(uiRessourcesGar);Propriétés disponibles :
| Nom | Type | Obligatoire | Default | Description |
|---|---|---|---|---|
base-api-url |
string |
oui |
URL de l'API REST des ressources diffusables | |
ressources-diffusables-api-uri |
string |
oui |
URI de la route GET des ressources diffusables | |
ressources-diffusables-size-api-uri |
string |
oui |
URI de la route GET du nombre de ressources diffusables | |
user-info-api-url |
string |
oui |
URL de l'API des informations utilisateurs |
<ui-ressources-gar
base-api-url=""
ressources-diffusables-api-uri=""
ressources-diffusables-size-api-uri=""
user-info-api-url=""
/>Plusieurs variables CSS peuvent être définis pour personnaliser le webcomponent :
| Nom | Description |
|---|---|
--ui-ressources-gar-ressources-title-color |
Permet de modifier la couleur des tites des cartes ressources |
--ui-ressources-gar-button-background-color |
Permet de modifier la couleur de fond des boutons |
--ui-ressources-gar-button-background-color-success |
Permet de modifier la couleur de fond des boutons de succès |
--ui-ressources-gar-button-text-color |
Permet de modifier la couleur du texte des boutons |
--ui-ressources-gar-button-text-color-success |
Permet de modifier la couleur du texte des boutons de succès |
--ui-ressources-gar-button-border-radius |
Permet de modifier le radius des boutons |
--ui-ressources-gar-card-border-radius |
Permet de modifier le radius des cartes |
--ui-ressources-gar-margin |
Permet de modifier le margin global |
--ui-ressources-gar-padding |
Permet de modifier le padding global |