Système de design GCComposants
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

Téléverseur de fichiers
<gcds-file-uploader>

Autres noms : fichiers téléversés, saisie de fichier, zone de dépôt. Un téléverseur de fichier est un espace où il est possible de sélectionner et d'ajouter des documents à l'appui.
  • GitHub
  • Figma

Aperçu du composant de téléverseur de fichiers

Structure du téléverseur de fichiers

  • Le libellé fournit les instructions sur le composant.
  • Le texte explicatif indique les types de fichiers acceptés et toute autre exigence, comme la taille maximum des fichiers.
  • Le bouton lance l’interface pour la sélection des fichiers.
  • L’élément de la liste des fichiers est un conteneur affichant le fichier téléversé.
  • Le nom du fichier affiche le nom du fichier qui a été ajouté.
  • Le bouton supprimer permet de supprimer un fichier téléversé avant la soumission.
Une image de la structure du composant téléverseur de fichiers.

Design et accessibilité du téléverseur de fichiers

Rédigez des libellés et des textes explicatifs clairs

  • Utilisez le libellé de champ pour formuler des attentes claires sur le type de fichier qu’une personne peut ou doit télécharger.
  • Utilisez le texte explicatif pour préciser toute limite de téléversement.

Masquez l’étiquette seulement lorsque le but est clair

  • Masquez visuellement l’étiquette uniquement lorsque le but du téléverseur de fichiers est clairement communiqué par le contexte, rendant l’étiquette visuellement redondante, comme dans les cas suivants :
    • tableaux ou autres mises en page où l’espace est limité;
    • paramètres et configurations.
  • Fournissez toujours une étiquette pour soutenir les technologies d’assistance.
  • N’ajoutez pas de texte explicatif si vous masquez l’étiquette, puisque celui-ci manque alors de contexte et peut distraire ou prêter à confusion.
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-02-12