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 Vue

Pour faciliter l’intégration des composants Web de Système de design GC dans les projets Vue, le paquet gcds-components-vue propose différentes enveloppes Vue. Ces enveloppes facilitent le travail avec les composants Web dans l’écosystème Vue en permettant la vérification des types, l’intégration avec Vue Router, et la prise en charge de la fonction v-model avec les contrôles de formulaire. Les composants Web héritent les propriétés et l’interopérabilité natives.

Instructions d’installation dans Vue

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

1. Installer le paquet

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

2. Importer Système de design GC

Dans votre fichier main.js, importez le plugiciel des composants de Système de design GC et utilisez-le : 
import { GcdsComponents } from '@gcds-core/components-vue';

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

3. Importer les styles de Système de design GC

Il y a 2 façons de le faire :
  • Importer le style dans main.js.
  • Importer des styles dans App.vue.
a. Importez les styles dans votre fichier main.js, à côté de votre style.css: 
import '@gcds-core/components-vue/gcds.css';
import './style.css';
b. Importez les styles dans fichier App.vue en utilisant la balise HTML style : 
<style src="@gcds-core/components-vue/gcds.css">
  /* global styles */
</style>
4. 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
Vous avez les mêmes options que ci-dessus :
  • Importer les styles dans main.js.
  • Importer les styles dans App.vue.
a. Importez les styles de Raccourcis CSS dans votre fichier main.js, à côté de votre fichier style.css : 
npm install @gcds-core/css-shortcuts
b. Importez les styles de Raccourcis CSS dans votre fichier App.vue en utilisant la balise HTML style : 
<style src="@gcds-core/css-shortcuts/dist/gcds-css-shortcuts.min.css">
  /* global styles */
</style>
5. 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