Dialog - Boîte de dialogue

Fenêtre simulée qui apparait au dessus du composant principal permettant de concentrer l’attention de l’utilisateur exclusivement sur une tâche ou un élément d’information, sans perdre le contexte de la page en cours.

Anatomie

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

Dialog - Anatomie

En-tête

Contenu

Pied facultatif

1. Titre

4. Zone de contenu (échange d'instance)

6. Premier bouton d'action

2. Zone d'action facultatif

5. Barre de défilement facultatif

7. Deuxième bouton d'action

3. Icône de fermeture facultatif

 

8. Troisième bouton d'action


Pied

En fonction du message passé à l'utilisateur et de si une réponse est nécessaire, un pied avec différents boutons est disponible dans les options de personnalisation.

Pied

 

Zone d'action

Un espace nommé "action buttons" est disponible pour pouvoir ajouter à sa guise des boutons spécifiques. Dans l'exemple ci dessous, nous avons utilisé la zone pour pouvoir ajouter un bouton d'édition ainsi qu'un bouton de partage.

Dialog - Zone d'action

 

Défilement

Une barre de défilement est disponible pour indiquer à l'utilisateur que du contenu est disponible dans la boîte de dialogue en cas d'écran trop petit.

Dialog - Défilement

 


Tailles

 

Les boites de dialogue sont disponibles en 3 largeurs différentes : small, medium et large.

 

Petit- Small

Petit- Small

Moyen - Medium

Moyen - Medium

Grand- Large

Grand- Large