Gcds-components NPM

GC Design system components

Installation

Install from npm

npm install gcds-components

Install 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: requires a server to load properly, if developing locally, please use .

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-react

Place the following code in the index.js file of your app.

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

Angular

npm install gcds-components gcds-components-angular

Place 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-components

Installer 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 se charge correctement. Si vous développez localement, utilisez plutôt .

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-react

Insé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-angular

Insé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.

@stencil/core @stencil/react-output-target stencil

@infinitebrahmanuniverse/nolb-gc @everything-registry/sub-chunk-1726 gcds-components-react

1 year ago

1 year ago

1 year ago

1 year ago