Mise en place et installation des packages @ds-autonomie/assets et @ds-autonomie/web-components
Rendre le Custom Elements compatible avec Angular
Dans chacun des modules qui utilisera les composants du design système, il faut ajouter le schéma CUSTOM_ELEMENTS_SCHEMAcomme l'exemple qui suit:
// mon-module.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
...
@NgModule({
...
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
Exemple d'ajout du schéma custom elements
Vous pouvez le configurer de manière globale dans le app.module.ts mais ce n'est pas recommandé.
Liens et configuration des ressources statiques
Lier les feuilles de styles en ajoutant dans le champ projects[].architect.build.styles du fichier angular.json les lignes suivantes:
// angular.json
// projects[].architect.build.styles
"styles": [
"src/styles.css",
"node_modules/@ds-autonomie/assets/css/dsa-theme.min.css"
"node_modules/@ds-autonomie/web-components/dist/themes/dsa-wc-theme.min.css"
]
Lignes à jouter pour lier les feuilles de style
Copier les fichiers statiques en ajoutant dans le champ projects[].architect.build.assets du fichier angular.json les lignes suivantes:
"assets": [
{
"glob": "**/*.*",
"input": "node_modules/@ds-autonomie/assets/icons",
"output": "/assets/icons"
},
]
Lignes à ajouter pour copier les fichiers statiques
Configuration des polices de caractères
Voir Installation des polices de caractères.
Imports individuel des composants
import '@ds-autonomie/web-components/dist/components/button/button.js';
// ou
import { DSAButton } from '@ds-autonomie/web-components';
Exemple d'import du composant `button`
Ressources
// Ajouter le lien de téléchargement du fichier .zip