Panneau secondaire
Le panneau secondaire permet de présenter le contenu relatif aux outils disponibles dans la carte, comme les filtres, la légende et la personnalisation de données.
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 panneau secondaire permet l’affichage de différents types de contenus liés aux outils, tels que :
- la légende
- les filtres
- la personnalisation de données
Quand l'utiliser
Le panneau secondaire est utilisé dans une carte complète lorsque l’utilisateur doit accéder à des outils d’interaction ou préciser des données.
Voici les indications sur des variantes possibles :
- Légende : À utiliser pour la signification visuelle des éléments cartographiques (couleurs, symboles, catégories). Le contenu de la légende doit permettre à l’utilisateur de comprendre rapidement la carte. Il peut être mis à jour dynamiquement selon les couches visibles. La légende doit rester claire et concise.
- Filtres : À utiliser pour présenter les options permettant de préciser les données visibles sur la carte (catégories, périodes, zones, etc.). Les filtres doivent être regroupés, selon la nature des données ou la fréquence d’usage. Le panneau doit offrir un contrôle clair sur l’état actif ou inactif des filtres et permettre de les réinitialiser facilement.
- Personnaliser l’affichage des données : À utiliser pour afficher les paramètres qui influent sur la manière dont les données sont affichées. Cette variante s’adresse à des utilisateurs qui souhaitent adapter la présentation visuelle des données à leurs besoins. Les changements doivent être réversibles et refléter en temps réel sur la carte.
Quand ne pas l’utiliser
On ne doit pas combiner le contenu informationnel et les interactions. Le panneau secondaire sert uniquement à présenter les fonctionnalités complémentaires aidant à la tâche de l’utilisateur. Le contenu informationnel doit uniquement apparaître dans le panneau principal.
Anatomie
- Titre du panneau
- Bouton de fermeture
- Zone de contenu
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.
Zone de contenu
Le panneau secondaire présente uniquement les contenus associés à l’outil actif sélectionné. Les éléments présents dans la zone de contenu du panneau secondaire varient selon la variante utilisée :
- Légende : contient la signification des symboles, couleurs et styles présents sur la carte, à l’aide de libellés concis et d’une présentation visuelle structurée et lisible. Elle est mise à jour dynamiquement selon les couches affichées.
- Filtres : contient des éléments de formulaires, une fonction de réinitialisation et, au besoin, un résumé des filtres appliqués.
- Personnalisation de données : contient des éléments de formulaire.
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans la trousse de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Panneau secondaire (complet)
Positionnement et alignement : Le panneau secondaire s’aligne à la gauche de la carte complète et se superpose au panneau principal lorsqu’un outil est activé. Sa hauteur correspond à celle de la carte.
Titre du panneau
Positionnement et alignement : Ce titre est placé dans un bandeau gris dans la partie supérieure du panneau.
Dimensions : Adaptée à la largeur du panneau.
Bouton de fermeture
Positionnement et alignement : Le bouton de fermeture est placé à la droite du bandeau titre.
Zone de contenu
Positionnement et alignement : Le contenu s’aligne à la gauche, avec le bandeau titre
Dimensions : Adaptées au contenu à afficher, avec une hauteur dynamique en fonction de la longueur du contenu. Une barre de défilement peut être ajoutée au besoin.
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
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Ouverture et fermeture du panneau
Le panneau secondaire s’affiche lorsqu’un outil actif de la carte est sélectionné. Il apparaît par glissement latéral à partir du bord gauche de la carte, en superposition partielle au panneau principal.
Le panneau reste visible tant que l’utilisateur interagit avec l’outil correspondant. Le clic dans la carte ne doit pas entraîner la fermeture du panneau, afin d’éviter toute perte de contexte ou d’interaction accidentelle.
La carte doit conserver l’état des réglages effectués dans le panneau secondaire (ex. filtres, choix de couches, personnalisation visuelle) une fois celui-ci fermé.
Dans le format mobile, le panneau secondaire prend l’espace occupé normalement par le panneau principal.
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 un outil de la carte pour ouvrir le panneau secondaire.
- Cliquer sur le bouton de fermeture pour fermer le panneau secondaire.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Utiliser la navigation au clavier pour atteindre et activer le composant à partir d’un outil qui lui est associé.
- Utiliser la navigation clavier pour atteindre le bouton de fermeture et fermer le composant.
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