Aller au contenu principal

Menu

Dans cette section, nous allons explorer comment utiliser zUI pour créer et gérer des menus NUI dans FiveM. Vous apprendrez à créer des menus et des sous-menus, à ajouter des éléments, et à gérer leur visibilité.

Création d'un Menu​

Pour créer un menu avec zUI, utilisez la fonction zUI.CreateMenu. Voici la syntaxe générale :

local Menu = zUI.CreateMenu(Title, Subtitle, Description, Banner, Key, Description)

Paramètres​

  • Title [string] : (Optionnel) Le titre du menu qui s'affiche en haut.
  • Subtitle [string] : (Optionnel) Le sous-titre du menu, affiché juste en dessous du titre.
  • Description [string]: (Optionnel) La description du menu affichée dans la barre de description
  • Banner [string] : (Optionnel) Une URL vers une image qui sera utilisée comme bannière en haut du menu.
  • Key [string] : (Optionnel) La touche qui, si définie, permettra d'ouvrir le menu.
  • Description [string] : (Optionnel) Une description textuelle du menu qui peut être affichée à des fins d'information.

Exemple​

local Menu = zUI.CreateMenu("Mon Menu", "Sous-Titre", "Description", "https://example.com/banner.png", "F1", "Description de mon menu")

Création d'un Sous-Menu​

Pour créer un sous-menu, utilisez la fonction zUI.CreateSubMenu. Voici la syntaxe :

local SubMenu = zUI.CreateSubMenu(Parent, Title, Subtitle, Description, Banner)

Paramètres​

  • Parent [zUI Instance] : Le menu principal auquel ce sous-menu sera rattaché.
  • Title [string] : (Optionnel) Le titre du sous-menu.
  • Subtitle [string] : (Optionnel) Le sous-titre du sous-menu.
  • Description [string] : (Optionnel) La description du sous-menu.
  • Banner [string] : (Optionnel) Une URL vers une image pour la bannière du sous-menu.

Exemple​

local SubMenu = zUI.CreateSubMenu(Menu, "Mon Sous-Menu", "Sous-Titre", "Description", "https://example.com/submenu_banner.png")

Ajout d'Items au Menu​

Pour ajouter des éléments à votre menu, utilisez la méthode SetItems. Vous devez définir une fonction qui spécifie les éléments à ajouter au menu. Voici comment vous pouvez le faire :

Menu:SetItems(function(Items)
    Items:AddSeparator("Voici comment ajouter un item :)")
end)

Types d'Items​

  • Séparateur AddSeparator : Ajoute un séparateur visuel.
  • Ligne AddLine : Ajoute une ligne colorée.
  • Bouton AddButton : Ajoute un bouton cliquable.
  • Bouton Lien AddLinkButton : Ajoute un bouton qui redirige vers un certain lien.
  • Checkbox AddCheckbox : Ajoute une checkbox que l'utilisateur peut cocher ou décocher.
  • Liste AddList : Ajoute une liste déroulante avec des options.
  • Liste de couleurs AddColorList : Ajoute une liste de couleurs.
  • Slider AddSlider : Ajoute un slider.

Gestion de la Visibilité du Menu​

Si vous avez défini une touche (Key) lors de la création du menu, vous pouvez simplement appuyer sur cette touche pour ouvrir ou fermer le menu.

Si vous n'avez pas défini de touche, vous pouvez contrôler la visibilité du menu en utilisant la méthode suivante :

Menu:SetVisible(not Menu:IsVisible())

Cette commande permet d'inverser l'état actuel de visibilité du menu : si le menu est ouvert, il sera fermé, et inversement.

Avec ces informations, vous êtes maintenant prêt à créer et gérer des menus interactifs dans FiveM en utilisant zUI. N'hésitez pas à explorer toutes les fonctionnalités offertes pour personnaliser vos menus selon vos besoins.