ZPROJECT

Exemple complet

Par
Sören
v1.0.6

L’exemple suivant regroupe un menu, un sous-menu et plusieurs composants :

lua
local Menu = zUI.CreateMenu(
    "Menu exemple",
    "zUI",
    "Présentation des composants",
    nil,
    "F1",
    "Ouvrir le menu exemple."
)

local subMenu = zUI.CreateSubMenu(
    Menu,
    "Sous-menu",
    "Options",
    "Composants avancés"
)

local checkboxState = false
local percentage = 0
local index = 1
local colorListIndex = 1

Menu:SetItems(function(Items)
    Items:AddSeparator("Composants")
    Items:AddLine()

    Items:AddButton(
        "Ouvrir le sous-menu",
        "Afficher les composants avancés.",
        {},
        function(onSelected, onHovered)
        end,
        subMenu
    )

    Items:AddLinkButton(
        "Site internet",
        "Visiter le site de la zSquad.",
        {},
        "https://zsquad.fr"
    )

    Items:AddCheckbox(
        "Checkbox",
        "Active ou désactive une option.",
        checkboxState,
        {},
        function(onSelected, onHovered)
            if onSelected then
                checkboxState = not checkboxState
            end
        end
    )

    Items:AddSlider(
        "Pourcentage",
        "Modifier une valeur.",
        percentage,
        10,
        {},
        function(onSelected, onHovered, onChange, newPercentage)
            if onChange then
                percentage = newPercentage
            end
        end
    )

    Items:AddList(
        "Liste",
        "Choisissez un élément.",
        index,
        { "Item #1", "Item #2" },
        {},
        function(onSelected, onHovered, onListChange, newIndex)
            if onListChange then
                index = newIndex
            end
        end
    )

    Items:AddColorList(
        "Couleur",
        "Choisissez une couleur.",
        colorListIndex,
        {
            "#00ff00",
            "#fffd2c",
            "#ff00ff",
            "#ff0000",
            "#0000ff"
        },
        {},
        function(onSelected, onHovered, onListChange, newIndex)
            if onListChange then
                colorListIndex = newIndex
            end
        end
    )
end)

subMenu:SetItems(function(Items)
    Items:AddSeparator("Sous-menu", "right")
    Items:AddLine()

    Items:AddButton(
        "Ouvrir une modale",
        "Afficher un formulaire.",
        {},
        function(onSelected, onHovered)
            if onSelected then
                local values = zUI.ShowModal("Informations", {
                    {
                        type = "text",
                        name = "Texte",
                        description = "Saisissez une valeur.",
                        isRequired = false,
                        minLength = 4,
                        maxLength = 15
                    },
                    {
                        type = "number",
                        name = "Nombre",
                        isRequired = false
                    },
                    {
                        type = "checkbox",
                        name = "Checkbox",
                        defaultValue = true
                    },
                    {
                        type = "colorpicker",
                        name = "Couleur",
                        defaultValue = "#faad2c"
                    },
                    {
                        type = "date",
                        name = "Date",
                        format = "DD/MM/YYYY"
                    }
                }, {})

                print(values[1])
            end
        end
    )
end)

Menu:OnOpen(function()
    print("Menu ouvert")
end)

Menu:OnClose(function()
    print("Menu fermé")
end)

Vous pouvez utiliser cette base dans une ressource client puis remplacer progressivement les composants par ceux de votre propre script.