Créer des modaux dans Générateur d'IU
Utilisez des modaux avec Générateur d'IU des composants pour fournir des alertes ou des appels à l’action à un utilisateur. Générateur d'IU est livré avec des modaux pour économiser du temps et des efforts.
Que sont les modaux ?
- Texte statique
- Texte dynamique
- Formulaires
- Images
- Boutons
Générateur d'IU comporte des fenêtres modales préconfigurées disponibles. Vous pouvez ajouter une fenêtre modale à votre composant. Configurez ensuite le contenu du modal et la façon dont il s’affiche à l’écran. Ajoutez un gestionnaire d’événements au modal pour effectuer une action lorsqu’un utilisateur le sélectionne. L’action peut alerter un utilisateur à propos d’un élément ou demander à un utilisateur de confirmer une action. Un modal permet de s’assurer qu’un utilisateur sait ce qui se passe. Par exemple, un modal peut demander à un utilisateur de confirmer une sélection avant de poursuivre l’action qu’il effectue sur la page principale.
Anatomie modale
- En-tête du modal
- Contenu modal
- Bouton Fermer la boîte de dialogue (aucune action effectuée par le modal)
- Au moins un bouton modal (une action peut être effectuée par le modal)
Types de modaux
Différents types de modaux sont disponibles dans Générateur d'IU, comme illustré dans la table suivante.
| Type de modal | Description |
|---|---|
| Alerte | Un modal d’alerte fournit des informations relatives à l’action du composant. Par exemple, lorsqu’un utilisateur appuie sur un bouton de suppression, une fenêtre contextuelle d’alerte peut s’afficher pour l’informer qu’il ne peut pas annuler une action de suppression. |
| Confirmer | Une fenêtre modale de confirmation demande à l’utilisateur de confirmer l’action du composant. Par exemple, lorsqu’un utilisateur appuie sur un bouton de suppression, il doit confirmer la suppression des données. Vous pouvez choisir les options de confirmation à partir des champs d’étiquette du bouton primaire et secondaire, tels que Oui/Annuler. |
| Confirmer et détruire | Un modal de confirmation et de destruction est plus directif, généralement relatif à la suppression ou à l’effacement du contenu. Il permet à l’utilisateur de connaître le sérieux d’une action et lui demande s’il souhaite poursuivre l’action. |
| Personnalisé | Les modaux personnalisés traitent les scénarios qui ne sont pas gérés à l’aide des modaux standard. Les fenêtres modales personnalisées peuvent être considérées comme un composant de conteneur sur une fenêtre modale. Vous pouvez ajouter une mise en page, des composants, des événements et des ressources de données personnalisés, comme vous le feriez sur une page. Le modal personnalisé utilise des mises en page pour vous permettre de concevoir entièrement les informations que vous voulez dans le modal. Les mises en page décident également de l’emplacement des informations dans l’écran modal. Vous pouvez utiliser le style de feuilles de style en cascade (CSS) pour modifier l’aspect visuel du modal. |
| iframe (en anglais) | Utilisez iframe pour intégrer du contenu dans votre modal à partir de contenu iframe existant à partir d’une URL et de données. |
| Fenêtre modale | Transmettez dynamiquement du contenu dans votre fenêtre modale Viewport via une liaison d’événements à l’aide d’un script client. |
Gestionnaires d’événements et modaux
Exposez les événements aux modaux pour gérer les événements d’appel à l’action. Par exemple, une action primaire, une action secondaire, etc. Vous configurez les données en ajoutant un gestionnaire d’événements et en invoquant une ressource de données. C’est aussi simple que d’ajouter un nouveau gestionnaire d’événements pour le composant qui possède un modal. Vous pouvez également ajouter un gestionnaire d’événements au modal lui-même. Vous sélectionnez l’événement que vous souhaitez associer au composant ou au modal et l’ajoutez. Consultez Ajouter un modal au composant les instructions détaillées.