Installation de Système de design GC

2. Pour commencer

Sélectionnez une option à l'étape 1 pour obtenir les instructions d'installation.

2. Pour commencer

Si vous utilisez Angular, suivez ces instructions pour installer les composants SDGC.

Installation à l'aide de npm

Naviguez jusqu'au dossier racine de votre projet et exécutez :

npm install @cdssnc/gcds-components @cdssnc/gcds-components-angular

Insérez le code suivant dans le fichier app.module.ts de votre application :

import { GcdsComponentsModule } from '@cdssnc/gcds-components-angular';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    GcdsComponentsModule
  ],
  providers: [],
  bootstrap: [...]
})

export class AppModule { }

Insérez le code suivant dans le fichier styles.scss de votre application :

@import '../node_modules/@cdssnc/gcds-components/dist/gcds/gcds.css';

2. Pour commencer

Si vous utilisez React, suivez ces instructions pour installer les composants SDGC.

Installation à l'aide de npm

Naviguez jusqu'au dossier racine de votre projet et exécutez :

npm install @cdssnc/gcds-components @cdssnc/gcds-components-react

Insérez le code suivant dans le fichier index.js de votre application :

import '@cdssnc/gcds-components-react/gcds.css'

2. Pour commencer

Si vous utilisez Vue, suivez ces instructions pour installer les composants SDGC.

Installation à l'aide de npm

Naviguez jusqu'au dossier racine de votre projet et exécutez :

npm install @cdssnc/gcds-components-vue

Dans votre fichier main.js, importez le plugiciel des composants Système de design GC et utilisez-le de la façon suivante :

import { GcdsComponents } from '@cdssnc/gcds-components-vue';

createApp(App).use(GcdsComponents).mount('#app');

Ajoutez les styles généraux à votre application. Vous pouvez les ajouter de plusieurs façons.

Vous pouvez soit les importer dans votre fichier main.js à côté de votre style.css :

import '@cdssnc/gcds-components-vue/gcds.css';
import './style.css';

ou les insérer dans votre App.vue à l'aide de la balise de style html.

<style src='@cdssnc/gcds-components-vue/gcds.css'>
  /* global styles */
</style>

2. Pour commencer

Si vous utilisez npm (node package manager) sans infrastructure, suivez ces instructions pour installer les composants SDGC.

Installation à l'aide de npm

Naviguez jusqu'au dossier racine de votre projet et exécutez :

npm install @cdssnc/gcds-components

Insérez le code suivant dans l'élément head de votre site :

<!-- Icons Font Awesome (pour avoir accès aux icônes, installer Font Awesome) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous">

<!-- GC Design System -->
<link rel="stylesheet" href="/node_modules/@cdssnc/gcds-components/dist/gcds/gcds.css">
<script type="module" src="/node_modules/@cdssnc/gcds-components/dist/gcds/gcds.esm.js"></script>
<script nomodule src="/node_modules/@cdssnc/gcds-components/dist/gcds/gcds.js"></script>

2. Pour commencer

Pour installer les composants SDGC sans infrastructure, suivez ces instructions.

Ajoutez le code

Utilisez la version la plus récente de Système de design GC. La version , publiée le , est la plus récente. Les versions épinglées offrent stabilité et prévisibilité parce que le code ne changera pas de manière inattendue, ce qui peut être crucial pour maintenir la stabilité d'une application. Toutefois, il faut mettre à jour manuellement les liens CDN chaque fois qu'une version plus récente de Système de design GC est publiée.

Insérez le code suivant dans l'élément head de votre projet :

<!-- Icons Font Awesome (pour avoir accès aux icônes, installer Font Awesome) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous">

<!-- GC Design System -->
<link rel="stylesheet" href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@||version||/dist/gcds/gcds.css">
<script type="module" src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@||version||/dist/gcds/gcds.esm.js"></script>
<script nomodule src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@||version||/dist/gcds/gcds.js"></script>

Remarque : script type="module" nécessite un serveur pour le chargement. Pour le développement local, veuillez utiliser script nomodule.

Mises à jour automatiques grâce à @latest

Utilisez la version @latest de Système de design GC pour recevoir des mises à jour automatiques chaque fois qu'une nouvelle version est publiée. Bien que cette approche vous évite la mise à jour manuelle des liens CDN, elle court le risque d'introduire des modifications qui entraînent une rupture de compatibilité avec le code base à mesure que les nouvelles versions sont automatiquement appliquées.

2. Pour commencer

Vous ne trouvez pas notre bibliothèque Figma? Suivez le guide :

Accéder à Figma

2. Pour commencer

Vous ne trouvez pas votre infrastructure dans la liste? Écrivez-nous pour obtenir des conseils.

Contactez nous