Système de design GCDémarrerInstallation de Système de design GC
Système de design GC Démarrer Aperçu des modèles de pagePage de base Aperçu des composantsAlerteAvisBarre de navigation latéraleBarre de navigation supérieureBascule de langueBoutonBoutons radioCarteCases à cocherChamp de dateChamp de saisieChemin de navigationConteneurDate de modificationDétailsEn-têteGrilleIcôneIndicateur d'étapeJeu de champsLienMasquage accessibleMenu thématiqueMessage d'erreurPaginationPied de pageRechercheRésumé des erreursSélectionSignatureTableauTéléverseur de fichiersTexteTitreZone de texte Aperçu des raccourcis CSS Réinitialisation des styles Mise en page réactiveÉtat Dimensionnement de la boîteDimensionnement du conteneurAffichageDébordementPositionVisibilité PoliceFamille de policeTaille de policeStyle de policeÉpaisseur de policeHauteur de ligneCouleur de lienTaille de lienDécoration de texte de lienStyle de listeAlignement de texteCouleur de texteDébordement de texteTransformation de texteSaut de mot MargeMarge intérieure Alignement de contenuAlignement des élémentsAlignement individuelÉlément flexibleDirection de l’élément flexibleÉlargissement de l’élément flexibleRétrécissement de l’élément flexibleHabillage de l’élément flexibleDégagementColonnes de grilleLignes de grilleJustification de contenuJustification des élémentsJustification individuelleOrdreAgencement de contenuAgencement des élémentsAgencement individuel Couleur de l'arrière-planCouleur de la bordureRayon de la bordureStyle de la bordureLargeur de la bordure Noms des icônesTaille de l'icôneImage CurseurÉvénements de pointeurTransition Aperçu des stylesUnités de styleCouleurEspacementTypographie Nous contacterS'impliquerTrouvez une démo

Installation dans un projet Angular

Afin de faciliter l’intégration des composants Web de Système de design GC à vos projets Angular, le paquet gcds-components-angular propose des enveloppes Angular. Ces enveloppes faciltent le travail avec les composants Web dans l’écosystème Angular en empêchant l’actualisation inutile du rendu grâce à une détection des changements découplée, et en permettant aux contrôles de formulaire de fonctionner avec ngModel et les formulaires réactifs. Les composants Web héritent les propriétés et l’interopérabilité natives.

Instructions d’installation dans Angular

Suivez ces étapes pour installer et utiliser les composants de Système de design GC dans votre projet Angular.

1. Installer le paquet

Naviguez vers le dossier racine de votre projet et exécutez la commande suivante : 
npm install @gcds-core/components @gcds-core/components-angular

2. Importer Système de design GC

Insérez le code suivant dans le fichier app.module.ts de votre application : 
import { GcdsComponentsModule } from '@gcds-core/components-angular';

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

export class AppModule { }
Pour importer les styles de Système de design GC, insérez le code suivant dans le fichier styles.scss de votre application : 
@import '../node_modules/@gcds-core/components/dist/gcds/gcds.css';
3. Ajouter la feuille de style des Raccourcis CSS Nous recommandons d’utiliser les raccourcis CSS de Système de design GC pour appliquer des classes utilitaires CSS prédéfinies. Ces classes sont conformes à nos composants et aident à construire plus rapidement tout en assurant l’uniformité. L’utilisation des Raccourcis CSS dans votre projet n’est pas obligatoire. Ils peuvent être ajoutés à votre CSS existant. Naviguez vers le dossier racine de votre projet et exécutez la commande suivante : 
npm install @gcds-core/css-shortcuts
Pour importer les Raccourcis CSS de Système de design GC, ajoutez le code suivant dans le fichier styles.scss de votre application : 
@import '../node_modules/@gcds-core/css-shortcuts/dist/gcds-css-shortcuts.min.css';
4. Commencer à créer Une fois le système de design installé, vous pouvez commencer à intégrer le code dont vous avez besoin dans votre projet. Commencer par un modèle Commencez avec un modèle de page de base. Il combine plusieurs composants pour des pages communes du GC. Commencer par les composants Ajoutez des composants pour créer un produit qui répond à vos besoins. Commencer par le code Ajoutez des classes de style à votre code HTML à l’aide des Raccourcis CSS. Ceci est pour votre code personnalisé.
Besoin d'aide? Si vous avez besoin d'aide, n'hésitez pas à nous écrire et nous vous aiderons à partir du bon pied.
2026-09-02