Drawer - Tiroir

Panneau latéral ou longitudinal permettant de visualiser un contenu additionnel.

Anatomie

Le composant tiroir est composé de plusieurs éléments dont certains ne sont visibles qu'en fonction des options de personnalisation choisies.

Entête

  1. Titre
  2. Icône de fermeture

Contenu

  1. Zone de contenu (échange d'instance)
  2. Barre de défilement

Pied (facultatif)

  1. Premier bouton d'action
  2. Deuxième bouton d'action
  3. Troisième bouton d'action

Vertical

Sur ce variant, le tiroir peut être affiché à droite ou à gauche de l'écran.

vertical

Horizontal

Sur ce variant, le tiroir peut être affiché en haut ou en bas de l'écran.

Horizontal

Styles

Il existe 2 états différents disponibles pour le tiroir :

 

Sans défilement

Cette version est utilisée lorsque le contenu que l'on souhaite afficher dans le tiroir peut être entièrement affiché sur l'écran de l'utilisateur.

sans défilement

 

Avec défilement

Lorsque le contenu de la modale est trop long pour s'afficher entièrement sur l'écran de l'utilisateur et que des boutons sont prévus en bas de la page, nous vous recommandons d'utiliser la modale avec défilement afin de rendre ces derniers toujours accessibles.

Avec défilement

Responsive

Sur les appareils mobiles nous conseillons d'avoir une largeur qui se situe entre 240 et 360 pixels pour permettre d'avoir suffisamment d'espace afin d'afficher les différentes options de navigation ou les actions, tout en ne prenant pas trop de place sur l'écran principal.

 


Alternative