Panneau principal
Le composant Panneau principal permet de présenter le contenu d’accueil et informationnel d’une carte complète, ainsi que certaines des actions qu’il est possible d’y réaliser.
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Variantes disponibles
Le composant Panneau principal offre trois variantes pour les types de contenu pouvant y être affiché :
Pour présenter un texte d’accueil
Cette variante s’affiche par défaut ou lorsqu’aucune sélection ni recherche n’est activée dans la carte.
Pour présenter les résultats de recherche
Cette variante s’affiche lorsqu’une recherche est initiée et que celle-ci contient plusieurs résultats. L’utilisateur est alors invité à sélectionner un élément dans la liste ou à préciser sa recherche.
Pour présenter le détail d’une sélection
Cette variante s’affiche lorsqu’une sélection est effectuée sur la carte ou dans les résultats de recherche.
Le contenu des variantes s’affichent dans la section contenu du panneau principal.
Quand l’utiliser
La variante pour présenter un texte d’accueil permet de mettre en contexte l’utilisateur et d’identifier la tâche qu’il est possible d’accomplir sur la carte. Ce texte est affiché par défaut dans le panneau lorsque l’utilisateur arrive sur la carte complète, ou lorsqu’aucune sélection ni recherche n’est activée.
La variante pour présenter les résultats de recherche présente la liste des résultats à l’aide d’un défilement continu, lorsque la recherche renvoie plusieurs résultats.
La variante pour présenter le détail d’une sélection affiche le contenu contextuel à la suite d’une sélection faite sur la carte, via les points d’intérêt, les marqueurs ou les résultats de recherche.
Quand ne pas l’utiliser
Chaque variante présente un contenu distinct ; on ne doit pas les combiner. On doit également éviter d’y placer des informations exhaustives sur l’utilisation de la carte ainsi que les conditions d’utilisation et les droits d’auteur, qui se trouveront plutôt dans une page indépendante disponible à partir du bandeau d’en-tête.
Anatomie
- Recherche
- Lien de navigation
- Contenu
- Outils
- Bouton rétractable
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Contenu du panneau principal
Les informations qui s’y trouvent sont essentielles à la tâche ; elles doivent être claires, concises et se limiter à du contenu textuel.
Dans la variante texte d’accueil, le contenu du panneau principal affiche par défaut un message d’accueil succinct et axé sur la tâche. Ce contenu est remplacé dès qu’une sélection ou une recherche est effectuée, mais l’utilisateur peut toujours y revenir par la navigation du panneau ou lorsque la page est réinitialisée.
Dans la variante résultats de recherche, le contenu présente la liste des résultats obtenus suite à la recherche. Ceux-ci peuvent être présentés sous forme de défilement continu.
Dans la variante détail d’une sélection, on retrouve des informations concernant une sélection faite dans la carte ou dans une liste de résultats.
Spécifications
Cette section présente les détails techniques sur la composition, les comportements fonctionnels et les interactions du composant. Pour plus d’informations sur les mises à jour passées et les changements prévus au composant, consulter l’onglet « Mises à jour ».
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Panneau principal
Positionnement et alignement : Dans le format bureau, le panneau est aligné à gauche. Dans le format mobile, le panneau est positionné au bas de l’écran.
Dimensions : Dans le format bureau, le panneau prend toute la hauteur de l’interface et a une largeur de 390 px. Lorsque le panneau est fermé, seul le bouton rétractable à la gauche de l’écran est visible. La barre de recherche reste affichée au même endroit, que le panneau soit ouvert ou fermé. Dans le format mobile, lorsque le panneau est ouvert, sa hauteur correspond au ⅔ de celle de la carte et il prend toute la largeur de l’interface. Fermé, c’est uniquement la portion présentant la barre de recherche qui reste visible, correspondant à une hauteur de 104 px.
Recherche
Positionnement et alignement : Le champ de recherche est situé dans la partie supérieure du panneau. Il est toujours visible dû à sa position fixe et s’aligne avec les autres éléments de contenu du panneau principal.
Dimensions : Adapté à la largeur du panneau.
Espacements : Il faut respecter un dégagement de 16 px à la gauche et à la droite du champ de recherche. Dans le format bureau, un dégagement de 32 px se trouve en dessous. Cet espace est de 24 px dans le format mobile.
Style : Idem au composant Barre de recherche, à l’exception du lien vers la recherche avancée, qu’il faut omettre. La recherche peut être accompagnée d’un bouton Filtres.
Lien de navigation
Positionnement et alignement : Situé sous la recherche et aligné avec les autres éléments de contenu du panneau principal.
Espacements : Il faut un espacement de 24 px au-dessus et au-dessous du lien de navigation. Dans le format mobile, c’est espacement est de 16 px.
Style : Se baser sur la fiche du composant Lien de navigation et le faire suivre d’un séparateur.
Contenu
Positionnement et alignement : Le contenu se trouve dans la zone centrale du panneau et s’aligne à la gauche, avec les autres éléments du panneau.
Dimensions : La partie visible du contenu varie selon les autres éléments qui constituent le panneau principal. Si le contenu est plus long que la hauteur disponible, une barre de défilement doit être ajoutée.
Espacements : Un dégagement de 16 px doit être préservé autour de la zone de contenu.
Outils
Positionnement et alignement : Les boutons des outils sont situés à la suite de la zone de contenu, dans une section toujours visible par sa position fixe. La section s’aligne avec les autres éléments contenus dans le panneau et est précédée d’un séparateur.
Dimensions : La hauteur de la section d’outils est de 56 px.
Espacements : Un dégagement d’au-minimum 24 px doit être conservé entre chaque bouton.
Bouton rétractable
Positionnement et alignement : Le bouton rétractable est situé à la droite du panneau principal dans le format bureau. Dans le format mobile, il se trouve au-dessus du panneau. Il est centré horizontalement ou verticalement, selon l’orientation du panneau.
Dimensions : Ses dimensions sont de 24 px par 40 px dans le format bureau et de 60 px par 24 px dans le format mobile.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Par défaut, le panneau est déployé à l’ouverture de la carte. Lors du clic sur le bouton rétractable, le panneau se ferme par un glissement latéral vers la gauche.
Le panneau s’ouvre aux interactions suivantes :
- Lors d’un clic sur le bouton rétractable;
- Lors de la sélection d’un élément sur la carte;
- Lors d’une recherche dans la barre de recherche;
- À la réinitialisation de la page.
Dans le format mobile, le panneau est fermé à l’ouverture de la carte.
Recherche
Lorsque la recherche retourne un seul résultat, celui-ci s’affiche dans le contenu du panneau principal, selon la variante détail d’une sélection.
Lorsque la recherche retourne plusieurs résultats, ceux-ci sont listés dans la section prévue pour le contenu, selon la variante résultat de recherche. L’utilisateur est invité à sélectionner un élément dans la liste de résultats pour afficher le contenu concerné, toujours dans la variante détail d’une sélection. Dans cette situation spécifique, l’utilisateur peut revenir à sa liste de résultats par le lien de navigation.
Outils
Lorsque plusieurs outils sont disponibles et qu’il est impossible de tous les afficher dans la section prévue, un bouton « Plus » accompagné d’un chevron est ajouté à la droite des outils visibles. Au clic, un menu contextuel s’affiche et liste les outils supplémentaires.
Bouton rétractable
Au clic, le bouton rétractable permet d’ouvrir ou fermer le panneau principal. L’icône de chevron change d’orientation selon l’état ouvert/fermé du panneau.
Dans le format bureau, le bouton rétractable reste visible lorsque le panneau est fermé.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris :
- Cliquer sur le bouton rétractable pour révéler ou masquer le contenu.
- Survoler le bouton avec la souris pour changer son état visuel (couleur ou icône).
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Appuyer sur la touche « Espace » ou « Entrée » pour activer le bouton rétractable et révéler/masquer le contenu.
- Utiliser la navigation au clavier pour atteindre et activer le composant et les éléments qui le composent.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 20 janvier 2026