https://github.com/gip-recia/ressources-diffusables-ui
UI des ressources diffusables
https://github.com/gip-recia/ressources-diffusables-ui
vue3 webcomponents
Last synced: 3 months ago
JSON representation
UI des ressources diffusables
- Host: GitHub
- URL: https://github.com/gip-recia/ressources-diffusables-ui
- Owner: GIP-RECIA
- License: apache-2.0
- Created: 2021-05-31T10:17:56.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-22T08:03:24.000Z (about 1 year ago)
- Last Synced: 2024-04-23T08:53:24.535Z (about 1 year ago)
- Topics: vue3, webcomponents
- Language: Vue
- Homepage:
- Size: 5.42 MB
- Stars: 0
- Watchers: 5
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# ui-ressouces-gar
> ⚠️ migration du projet vers https://github.com/GIP-RECIA/recia-webcomponents/tree/main/packages/ressources-diffusables
UI des ressources du GAR en Vue.js.
- [ui-ressouces-gar](#ui-ressouces-gar)
- [Installation](#installation)
- [Paramètres](#paramètres)
- [Variables CSS](#variables-css)
- [Modification de style](#modification-de-style)
## Installation
1. Installation via npm :
```sh
npm install @gip-recia/ui-ressouces-gar
```
2. Importation du composant :
Dans un module JavaScript :
```js
import '@gip-recia/ui-ressouces-gar';
```
Dans une page HTML :
```html
```
3. Ajout du composant sur une page HTML :
```js
const uiRessourcesGar = document.createElement('ui-ressouces-gar');
document.body.appendChild(uiRessourcesGar);
```
## Paramètres
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 |
```html
```
## Variables CSS
### Modification de style
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 |