Slider

Les curseurs dans zUI permettent d’ajouter des contrôles de type slider à vos menus, offrant une manière intuitive d’ajuster des valeurs numériques, telles que des volumes, des niveaux ou des options de personnalisation. Voici comment configurer et utiliser la fonction AddSlider.

Fonction AddSlider

La syntaxe pour ajouter un curseur est la suivante :

zUI:AddSlider(Title, Description, Percentage, Step, Styles, Action)

Paramètres

• Title [string] : Le titre affiché au-dessus du curseur.
• Description [string | number | nil] : (Optionnel) Une description ou un sous-titre affiché sous le titre.
• Percentage [number | nil] : (Optionnel) La valeur initiale du curseur, exprimée en pourcentage (0-100). La valeur par défaut est 100.
• Step [number] : La valeur d'incrément ou de décrément à chaque ajustement.
• Styles [table] : Un tableau contenant les styles pour personnaliser le curseur :

  • IsDisabled [boolean] : Désactive le curseur si true.
  • Color [string] : Détermine la couleur principale du curseur.
  • ShowPercentage [boolean] : Affiche ou masque le pourcentage actuel sur le curseur.

• Action [function(onSelected, onHovered, onChange, percentage)] : Une fonction à exécuter lorsque l’utilisateur interagit avec le curseur. Cette fonction reçoit les paramètres suivants :

  • onSelected (vrai si l'utilisateur valide le curseur)
  • onHovered (vrai si le curseur est survolé)
  • onChange (vrai si la valeur du curseur a changé)
  • percentage (la nouvelle valeur du curseur en pourcentage)

Exemple de Création d'un Curseur

Voici un exemple d'utilisation de la fonction AddSlider pour ajouter un curseur à un menu :

local currentPercentage = 0
Menu:SetItems(function(Items)
    Items:AddSlider(
        "Volume général",
        "Ajustez le volume principal",
        currentPercentage,
        5,
        { IsDisabled = false, Color = "#00ff00", ShowPercentage = true },
        function(onSelected, onHovered, onChange, percentage)
            if onChange then
                currentPercentage = percentage
            end
        end
    )
end)

Explication

1. Title : "Volume général" s’affiche comme titre du curseur.
2. Description : "Ajustez le volume principal" fournit des informations supplémentaires.
3. Percentage : currentPercentage indique que le curseur démarre à 0%.
4. Step : 5 signifie que chaque ajustement augmente ou diminue la valeur de 5%.
5. Styles :
   • IsDisabled : Le curseur est actif car false.
   • Color : La couleur principale est définie sur "#00ff00" (vert).
   • ShowPercentage : Le pourcentage actuel est affiché.
6. Action : La fonction réagit aux changements (onChange) ou à la confirmation (onSelected) de l'utilisateur.

Résumé

Pour ajouter un curseur dans zUI :

1. Utilisez zUI:AddSlider pour intégrer un curseur à votre menu.
2. Spécifiez les paramètres comme le titre, la description, le pourcentage initial, l’incrément et les styles.
3. Implémentez une fonction Action pour gérer les interactions utilisateur.

Les curseurs enrichissent vos menus en permettant des ajustements précis et interactifs. Utilisez-les pour des paramètres, des niveaux ou toute valeur nécessitant un contrôle visuel et accessible.