Modal

Les modals dans zUI permettent d'afficher des fenêtres interactives contenant des champs de saisie pour recueillir des informations de l'utilisateur. Ces fenêtres sont généralement utilisées pour obtenir des données spécifiques dans des scénarios nécessitant plusieurs options de saisie.

Fonction ShowModal

La syntaxe pour afficher un modal est la suivante :

zUI.ShowModal(Title, Inputs, Styles)

Paramètres

• Title [string] : Le titre de la fenêtre modale (par exemple, "Paramètres", "Formulaire d'inscription").
• Inputs [table] : Une table définissant les champs de saisie que l'utilisateur peut remplir. Chaque champ est défini par plusieurs propriétés :
  • type [string] : Le type du champ d'entrée (ex : "text", "number", "checkbox", "colorpicker", "date").
  • name [string] : Le nom du champ d'entrée (par exemple, "Nom", "Date de naissance").
  • description [string] : La description affichée sous le champ d'entrée (par exemple, "Entrez votre nom").
  • isRequired [boolean] : Indique si le champ est obligatoire.
  • minLength [int] : La longueur minimale (si applicable pour le champ).
  • maxLength [int] : La longueur maximale (si applicable pour le champ).
  • format [string] : Le format de la saisie (par exemple, pour une date "DD/MM/YYYY").
  • defaultValue [string] : La valeur par défaut du champ (si applicable).
• Styles [table] : Un tableau définissant les styles du modal, par exemple la couleur principale (PrincipalColor).

Exemple d'utilisation

Voici un exemple d'utilisation de ShowModal :

zUI.ShowModal("Formulaire de soumission", {
    { type = "text",        name = "Nom",            description = "Entrez votre nom", isRequired = true, minLength = 4, maxLength = 15 },
    { type = "number",      name = "Âge",            description = "Entrez votre âge", isRequired = false },
    { type = "checkbox",    name = "Accepter les termes", description = "Acceptez-vous les termes ?", defaultValue = true },
    { type = "colorpicker", name = "Couleur préférée", defaultValue = "#faad2c" },
    { type = "date",        name = "Date de naissance", description = "Entrez votre date de naissance", format = "DD/MM/YYYY" }
}, { PrincipalColor = "#faad2c" })

Cela affichera un modal intitulé "Formulaire de soumission" avec plusieurs champs d'entrée, chacun ayant ses propres paramètres (comme des champs de texte, des cases à cocher et un sélecteur de couleur).

Résumé

Pour utiliser un modal dans zUI :

1. Utilisez zUI.ShowModal pour créer et afficher un modal.
2. Définissez les champs d'entrée dans le tableau Inputs, en spécifiant leur type, nom, description, et autres propriétés spécifiques.
3. Personnalisez les styles du modal en définissant la couleur principale ou d'autres options dans le tableau Styles.
4. Les modals sont particulièrement utiles pour collecter des informations de l'utilisateur ou guider l'utilisateur à travers un processus interactif dans votre application.

Les modals enrichissent l'interaction utilisateur en fournissant un moyen clair et structuré pour recueillir des données dans un environnement dynamique.