https://github.com/gip-recia/mediacentre-ui
UI of the mediacentre
https://github.com/gip-recia/mediacentre-ui
vue2 webcomponents
Last synced: about 1 month ago
JSON representation
UI of the mediacentre
- Host: GitHub
- URL: https://github.com/gip-recia/mediacentre-ui
- Owner: GIP-RECIA
- License: apache-2.0
- Archived: true
- Created: 2021-06-07T09:42:10.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-09-23T05:33:06.000Z (9 months ago)
- Last Synced: 2025-03-02T20:14:49.448Z (3 months ago)
- Topics: vue2, webcomponents
- Language: Vue
- Homepage:
- Size: 2.32 MB
- Stars: 0
- Watchers: 5
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# mediacentre-ui
> ⚠️ migration du projet vers https://github.com/GIP-RECIA/recia-webcomponents/tree/main/packages/mediacentre
- [mediacentre-ui](#mediacentre-ui)
- [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/mediacentre-ui
```
2. Importation du composant :
Dans un module JavaScript :
```js
import '@gip-recia/mediacentre-ui';
```
Dans une page HTML :
```html
```
3. Ajout du composant sur une page HTML :
```js
const component = document.createElement('mediacentre-ui');
document.body.appendChild(component);
```
## Paramètres
Propriétés disponibles :
| Nom | Type | Obligatoire | Default | Description |
| --------------------------------- | :------: | :---------: | :-----: | ---------------------------------------------------------------------------------------------------------- |
| `mediacentre-context-url` | `string` | `non` | | contexte de l'URL. |
| `base-api-url` | `string` | `non` | | URL de l'API REST MediaCentre. |
| `user-info-api-url` | `string` | `non` | | URL de l'API des informations utilisateurs. |
| `user-rights-api-url` | `string` | `non` | | URL de l'API des droits utilisateurs. |
| `get-user-favorite-resources-url` | `string` | `non` | | URL de l'API pour récupèrer la liste des identifiants des ressources favorites de l'utilisateur. |
| `put-user-favorite-resources-url` | `string` | `non` | | URL de l'API pour modifier la liste des identifiants des ressources favorites de l'utilisateur. |
| `fname-mediacentre-ui` | `string` | `non` | | Fname de la portlet du Mediacentre-UI (utilisé pour la gestion des ressources favorites de l'utilisateur). |
```html
```
## Variables CSS
### Modification de style
Plusieurs variables CSS peuvent être définis pour personnaliser le webcomponent :
| Nom | Description |
| --------------------------------------------------- | ------------------------------------------------------------ |
| `--ui-mediacentre-border-color` | Couleur associée au domaine de l'utilisateur. |
| `--ui-mediacentre-background-color` | Couleur de fond du composant (la même que celle du portail). |
| `--ui-mediacentre-card-background-color` | Couleur de fond des cartes ressources. |
| `--ui-mediacentre-font-color` | Couleur du texte. |
| `--ui-mediacentre-menu-title-background-color` | Couleur de fond du titre du menu et de l'icône infos. |
| `--ui-mediacentre-category-hover-background-color` | Couleur de fond au survol d'une catégorie. |
| `--ui-mediacentre-category-active-background-color` | Couleur de fond d'une catégorie sélectionnée. |