Sheet

Une sheet permet aux utilisateurs d'effectuer une ou plusieurs tâches distinctes liées à la vue principale sans les sortir de leur contexte actuel.

Description

Une sheet permet aux utilisateurs d'effectuer une ou plusieurs tâches distinctes liées à la vue principale sans les sortir de leur contexte actuel.

Les sheets peuvent contenir des menus, des options, des actions supplémentaires, des formulaires etc. liées à un éléments.

On y retrouvera par exemple les différentes actions que l'on peut effectuer sur un mail : supprimer, archiver, marquer comme lu, etc…

Attention : les derniers développements ont démontré que la sheet était un composant problématique, on évitera dès lors de l'utiliser, surtout pour des fomulaires.

Plateformes

Anatomie

Text

  1. Sheet : bloc qui vient superposer le contenu
  2. Handle : permet à l'utilisateur de tirer dessus pour agrandir, rétrécir ou fermer la sheet
  3. Contenu

Action

Usage

Quand l'utiliser ?

Lorsque l'on veut permettre à l'utilisateur d'obtenir des informations supplémentaires ou de réaliser des actions sans lui faire quitter la page.

Il existe 3 versions de sheet : 

  • Text : utilisé pour donner à l'utilisateur des informations textuelles supplémentaire sur un élément
  • Action : utilisé pour afficher les actions réalisables sur un éléments. Pour ouvrir cette sheet d'action, l'utilisateur devra cliquer sur un bouton qui sera en général représenté par trois petits point •••
  • Form : utilisé pour afficher un formulaire simple sans quitter la page principale

Attention : La sheet est très similaire à la modal, mais s'utilise dans un contexte différent. La modal est utilisée pour présenter des informations critiques ou demander à l'utilisateur d'entrer des données nécessaires à l'accomplissement de son travail, la sheet quant à elle, ne contient que des informations secondaires ou des actions que l'utilisateur peut entreprendre lorsqu'il le souhaite. 

Des questions ou un feedback ?

N’hésitez pas à contacter la team Design System par mail.