Système de design GCDémarrerAperçu des modèles de pagePage de baseAperç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 texteAperçu des raccourcis CSSRéinitialisation des stylesMise en page réactiveÉtatDimensionnement 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 motMargeMarge intérieureAlignement 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 individuelCouleur de l'arrière-planCouleur de la bordureRayon de la bordureStyle de la bordureLargeur de la bordureNoms des icônesTaille de l'icôneImageCurseurÉvénements de pointeurTransitionAperçu des stylesUnités de styleCouleurEspacementTypographieNous contacterS'impliquerTrouvez une démo
Détails <gcds-details>
Autres noms : accordéon, développer/réduire.Le composant Détails est un bouton interactif permettant à une personne d’afficher ou de masquer du contenu.
GitHub
Figma
Aperçu du composant de détails
Explorez les problèmes réglés par le composant Détails et découvrez s’ils peuvent être utilisés pour résoudre votre problème particulier.
Problèmes résolus par le composant Détails
Utilisez le composant Détails pour offrir un aperçu du contenu plus détaillé que vous avez dissimulé et qu’il est possible d’afficher. Utilisez ce composant pour :
réduire la taille de la page et le temps qu’il faut pour faire défiler le contenu lorsque ce dernier est volumineux et qu’il n’est pas nécessaire de le lire dans son ensemble. Prenons l’exemple d’un modèle de collecte d’adresse : l’adresse de livraison peut être dissimulée à l’aide du composant Détails si elle est identique à l’adresse postale ou à l’adresse de facturation.
offrir un résumé d’un contenu qui est secondaire vis-à-vis de la tâche principale et qui pourrait être accablant pour certaines personnes;
permettre de lire rapidement une page comportant de nombreux sous-titres. Prenons l’exemple d’une série de questions et de réponses : vous pouvez présenter les questions comme les titres d’un composant Détails et permettre ainsi à la personne d’afficher n’importe quelle section pour lire le contenu de la réponse;
donner au lectorat la possibilité de contrôler le contenu pour les sujets pouvant bouleverser certaines personnes. Celles-ci peuvent accéder au contenu une fois qu’elles se sentent prêtes et le dissimuler une fois qu’elles l’ont vu.
Composants connexes
Onglets : lorsque vous souhaitez remplacer tout le contenu d’une section ou d’une page. Liens : pour permettre de naviguer à une nouvelle page, à un autre site Web, à un fichier ou à une nouvelle section de la page actuelle et de lancer un téléchargement de fichiers. Boutons : pour modifier des données, changer d’état ou lancer une action spécifique. Aidez-nous à nous améliorer Vous avez des questions ou des demandes? Faites-nous part de vos commentaires à l'aide de notre formulaire de contact. Quelque chose ne va pas? Signalez-le sur GitHub en créant un compte. Vous pourrez accéder aux réponses de l'équipe, suivre les progrès réalisés concernant votre problèmes et voir les problèmes signalés par d'autres personnes. Fournir des commentaires Signaler un problème sur GitHub 2025-05-06