local Menu = zUI.CreateMenu("Titre", "Sous-Titre", "F1", "Ouvrir le menu exemple.", "https://i.ibb.co/z8TFzVq/banner.png")
local SubMenu = zUI.CreateSubMenu(Menu, "Titre", "Sous-Titre")
local CheckboxState = false
Menu:SetItems(function(Items)
Items:AddSeparator("C'est un séparateur")
Items:AddLine({ "#ff0000", "#00ff00", "#0000ff" })
Items:AddButton("Bouton", "Accéder au submenu.", { RightLabel = "→" }, function(onSelected, onHovered)
end, SubMenu)
Items:AddCheckbox("Checkbox", "Gérer l'êtat de la checkbox.", CheckboxState, { LeftBadge = "CASH" },
function(onSelected, onHovered, isChecked)
if onSelected then
CheckboxState = isChecked
end
end)
Items:AddList("Liste", "Choisir entre le ~#faccdd~KeyboardInput~s~ et le ~#dcc789~AlertInput~s~.",
{ "KeyboardInput", "AlertInput" }, {}, function(onSelected, onHovered, onListChange, index)
if onSelected then
if index == 1 then
local value = zUI.KeyboardInput("Titre", "Sous-titre", "Placeholder", 50)
print(value)
else
local value = zUI.AlertInput("Titre", "Sous-titre", "Le zUI est la meilleur librairie ?")
print(value)
end
end
end)
end)
Menu:OnOpen(function()
print("Je suis ouvert !")
end)
Menu:OnClose(function()
print("Je suis fermé !")
end)
SubMenu:SetItems(function(Items)
Items:AddSeparator("Je suis le submenu :)")
end)
zUI est une bibliothèque avancée pour la création de menus NUI dans FiveM. Conçue pour être sobre, optimisée, et visuellement attrayante, elle utilise React pour l'interface utilisateur, tout en vous permettant d'écrire vos scripts en Lua. Inspirée de RageUI, zUI apporte des fonctionnalités modernisées, une expérience utilisateur améliorée et simplifie considérablement l'accès à la création de menus pour les développeurs.
- 🔧 Simplicité d'Utilisation : Interface claire et intuitive pour une intégration facile dans vos scripts Lua.
- ⚡ Performance Supérieure : Construit avec des technologies modernes pour des performances optimales.
- 💻 Interface Moderne : Utilise React pour des menus plus réactifs et fluides.
- 🎨 Personnalisation Avancée : Ajustez les couleurs, le texte et le comportement des éléments de menu à votre guise.
git clone https://github.com/ZProject-Official/zUI.git
Naviguez dans le répertoire cloné et installez les dépendances nécessaires pour React.
- Veillez à bien avoir Node.js sur votre machine.
cd zUI
cd web
npm install && npm run build
Ou installez la version Release
Félicitations, vous avez terminé l'installation et la configuration de zUI sur votre serveur FiveM ! 🚀
Maintenant que vous avez mis en place les bases, il est temps de vous amuser avec la personnalisation et de rendre vos menus aussi attractifs que fonctionnels.
Pour créer un menu avec zUI, utilisez la fonction zUI.CreateMenu
. Voici un exemple de création de menu :
local Menu = zUI.CreateMenu("Titre", "Sous-Titre", "F1", "Ouvrir le menu exemple.", "Url de votre bannière")
Une fois le menu créé, vous pouvez ajouter des composants tels que des séparateurs, des lignes colorées, et des boutons interactifs.
Menu:SetItems(function(Items)
Items:AddSeparator("C'est un séparateur")
Items:AddLine({ "#ff0000", "#00ff00", "#0000ff" })
Items:AddButton("Bouton", "Accéder au submenu.", { RightLabel = "→" }, function(onSelected, onHovered)
end, SubMenu)
Items:AddCheckbox("Checkbox", "Gérer l'êtat de la checkbox.", CheckboxState, { LeftBadge = "CASH" },
function(onSelected, onHovered, isChecked)
if onSelected then
CheckboxState = isChecked
end
end)
Items:AddList("Liste", "Choisir entre le ~#faccdd~KeyboardInput~s~ et le ~#dcc789~AlertInput~s~.",
{ "KeyboardInput", "AlertInput" }, {}, function(onSelected, onHovered, onListChange, index)
if onSelected then
if index == 1 then
local value = zUI.KeyboardInput("Titre", "Sous-titre", "Placeholder", 50)
print(value)
else
local value = zUI.AlertInput("Titre", "Sous-titre", "Le zUI est la meilleur librairie ?")
print(value)
end
end
end)
end)
Q : Comment puis-je changer la touche d'ouverture du menu ?
R : Vous pouvez définir la touche d'ouverture lors de la création du menu via le paramètre dédié, ou via la configuration de votre ressource.
Q : Puis-je utiliser zUI avec d'autres scripts ?
R : Absolument, zUI est conçu pour être entièrement compatible avec d'autres scripts Lua pour FiveM.
- Initial release avec support pour les menus personnalisés et les composants de base.
- Correction de différents problèmes.
- Refonte totale de la partie back-end.
- Ajouts de différentes features (keyboardInput, Closable, OnClose, OnListChange, Arrows, Checkbox Icon, Config).
- Ajouts de différentes features (AlertInput, Couleurs personnalisés
~#faad2c~
, Animations, Scrool de façon smooth, Optimisation de la navigation, Hover configurable, Auto focus dans le keyboardInput).
Pour toute question ou problème, rejoignez notre Discord.
Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.
Merci d'avoir choisi zUI pour vos projets FiveM. Nous espérons que cette bibliothèque vous aidera à créer des menus NUI élégants et performants !