Passer au contenu principal

SidePanel

SidePanel dans Storybook

Utilisation​

Présentation​

Le panneau latéral organise la structure du contenu et fournit un contexte pour orienter les utilisateurs. Il sert de navigation secondaire, offrant un accès aux outils, aux paramètres ou aux sections supplémentaires. Positionné sur le côté gauche de l'écran, il s'étend verticalement de l'en-tête au bas de la page et pousse le contenu plutôt que de venir en superposition.

Quand l'utiliser​

  • L'application comporte plusieurs sections entre lesquelles les utilisateurs doivent basculer fréquemment.
  • Les utilisateurs ont besoin d'un menu cohérent qui reste visible sur toutes les pages.
  • Une structure hiérarchique est nécessaire, avec des sections et des sous-sections.
  • La navigation doit être accessible en un minimum de clics.
  • Vous souhaitez permettre aux utilisateurs de réduire le volet de navigation pour économiser de l'espace tout en le maintenant disponible.

Structure​

Image illustrant la structure du panneau latéral avec un conteneur, une liste d'éléments et un bouton d'icône réductible

  1. Conteneur de panneau : structure principale qui contient tous les composants du panneau latéral.
  2. Liste d'éléments : liste d'éléments sélectionnables.
  3. Bouton d'icône réductible : bouton fléché qui indique si le panneau peut être réduit ou développé. Cliquez dessus pour changer l'état du panneau latéral.

Tous les éléments ne sont pas obligatoires. N'incluez que ce qui est nécessaire pour votre cas d'utilisation spécifique. Le panneau latéral est un panneau ouvert et flexible qui peut accueillir divers éléments en fonction de cas d'utilisation spécifiques. Les équipes peuvent le personnaliser en ajoutant différents composants et fonctionnalités selon les besoins, tout en conservant une expérience rationalisée.

Comportement​

  • Apparaît sur le côté gauche de l'écran et s'étend de l'en-tête au bas de la page.
  • Peut être réductible ou persistant, selon les besoins de l'application.
  • Pousse le contenu plutôt que de venir en superposition, ce qui garantit une mise en page claire et structurée.
  • Fournit un accès rapide à la navigation secondaire, aux outils ou aux actions contextuelles sans interrompre le workflow principal.

Exemples d'utilisation​

Exemples d'utilisation du panneau latéral, mettant en valeur sa nature ouverte et flexible.

Panneau latéral avec un indicateur de progression Panneau latéral avec un indicateur de progression de la mise en page des étapes


Panneau latéral avec une vue arborescente Panneau latéral avec un composant de vue arborescente