GC Design system components
Installation
Install from npm
npm install gcds-componentsInstall with CDN
Place the following code in the <head> element of your site.
All gcds-components should now be ready to use in your site.
<!-- Font Awesome (Icons) -->
<link href="https://unpkg.com/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- GC Design System -->
<link rel="stylesheet" href="https://unpkg.com/gcds-components/dist/gcds/gcds.css">
<script type="module" src="https://unpkg.com/gcds-components/dist/gcds/gcds.esm.js"></script>
<script nomodule src="https://unpkg.com/gcds-components/dist/gcds/gcds.js"></script>Note: <script type="module"> requires a server to load properly, if developing locally, please use <script nomodule>.
Supported frameworks
The gcds-component library works in multiple frameworks.
Javascript
Place the following code in the <head> element of your site.
<!-- Font Awesome (Icons) -->
<link href="https://unpkg.com/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- GC Design System -->
<link rel="stylesheet" href="/node_modules/gcds-components/dist/gcds/gcds.css">
<script type="module" src="/components/dist/gcds/gcds.esm.js"></script>
<script nomodule src="/components/dist/gcds/gcds.js"></script>All gcds-components should now be ready to use in your site.
React
npm install gcds-components gcds-components-reactPlace the following code in the index.js file of your app.
import 'gcds-components-react/gcds.css'Angular
npm install gcds-components gcds-components-angularPlace the following code in the app.module.ts file of your app.
import { GcdsComponentsModule } from 'gcds-components-angular';
@NgModule({
declarations: [
...
],
imports: [
...,
GcdsComponentsModule
],
providers: [],
bootstrap: [...]
})
export class AppModule { }Place the following code in the syles.scss file of your app.
@import '../node_modules/gcds-components/dist/gcds/gcds.css';Vue
Place the following code in the main.js file of your app.
import { applyPolyfills, defineCustomElements } from 'gcds-components/loader';
import 'gcds-components/dist/gcds/gcds.css';
applyPolyfills().then(() => {
defineCustomElements();
});All gcds-components should now be ready to use in your Vue app.
Système de design - composants GC
Installation
Installer le paquet avec npm
npm install gcds-componentsInstaller le paquet avec CDN
Insérez le code qui suit à l'intérieur de la balise <head> de votre site.
Vous devriez maintenant pouvoir utiliser tous les composants de gcds-components sur votre site.
<!-- Font Awesome -->
<link href="https://unpkg.com/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- GC Système de design -->
<link rel="stylesheet" href="https://unpkg.com/gcds-components/dist/gcds/gcds.css">
<script type="module" src="https://unpkg.com/gcds-components/dist/gcds/gcds.esm.js"></script>
<script nomodule src="https://unpkg.com/gcds-components/dist/gcds/gcds.js"></script>Remarque : Il faut un serveur pour que <script type="module"> se charge correctement. Si vous développez localement, utilisez plutôt <script nomodule>.
Cadres d'application pris en charge
La bibliothèque gcds-components fonctionne sous plusieurs cadres d'application.
Javascript
Insérez le code qui suit à l'intérieur de la balise <head> de votre site.
<!-- Font Awesome -->
<link href="https://unpkg.com/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- GC Système de design -->
<link rel="stylesheet" href="/node_modules/gcds-components/dist/gcds/gcds.css">
<script type="module" src="/components/dist/gcds/gcds.esm.js"></script>
<script nomodule src="/components/dist/gcds/gcds.js"></script>Vous devriez maintenant pouvoir utiliser tous les composants de gcds-components sur votre site.
React
npm install gcds-components gcds-components-reactInsérez le code qui suit dans le fichier index.js de votre application.
import 'gcds-components-react/gcds.css'Angular
npm install gcds-components gcds-components-angularInsérez le code qui suit dans le fichier app.module.ts de votre application.
import { GcdsComponentsModule } from 'gcds-components-angular';
@NgModule({
declarations: [
...
],
imports: [
...,
GcdsComponentsModule
],
providers: [],
bootstrap: [...]
})
export class AppModule { }Insérez le code qui suit dans le fichier styles.scss de votre application.
@import '../node_modules/gcds-components/dist/gcds/gcds.css';Vue
Insérez le code qui suit dans le fichier main.js de votre application.
import { applyPolyfills, defineCustomElements } from 'gcds-components/loader';
import 'gcds-components/dist/gcds/gcds.css';
applyPolyfills().then(() => {
defineCustomElements();
});Vous devriez maintenant pouvoir utiliser tous les composants de gcds-components dans votre application Vue.