Kairo Dev
Connexion Créer un compte

UI Docs

kairo-ui v1.0.3 dépendance : aucune Voir le produit

Présentation

Kairo UI regroupe les composants d'interface que toutes les ressources utilisent : notifications, barres de progression, menus contextuels, boîtes de saisie et aides à l'écran. Le rendu est identique partout, ce qui donne une vraie cohérence au serveur.

Tout s'appelle par export côté client. Kairo UI fonctionne seul : il n'a pas besoin de Kairo Core.

Installation

  1. Place le dossier kairo-ui dans resources/[kairo]/.
  2. Ajoute ensure kairo-ui avant les ressources qui l'utilisent.
  3. Choisis ta couleur d'accent et la position des notifications dans config.lua.
server.cfg
# server.cfgensure kairo-coreensure kairo-ui

Configuration

config.lua
-- config.luaConfig.Accent   = '#18c8ff'Config.Position = 'top-right' -- position des notificationsConfig.Sounds   = true

API

Les exports s'appellent avec exports['kairo-ui']:Nom(...). Les fonctions serveur ne sont jamais accessibles depuis le client.

Notify

client
exports['kairo-ui']:Notify(message, kind, duration)

Affiche une notification.

ParamètreTypeDescription
messagestringTexte
kindstring?info, success, warning, error
durationnumber?Millisecondes

Retour rien

exemple.lua
exports['kairo-ui']:Notify('Véhicule réparé', 'success')

Progress

client
exports['kairo-ui']:Progress(label, duration, options)

Barre de progression bloquante. Le joueur peut l'annuler (touche X) si canCancel est vrai.

ParamètreTypeDescription
labelstringTexte affiché
durationnumberDurée en millisecondes
optionstable?{ canCancel, anim, disableMovement }

Retour boolean — false si annulée

exemple.lua
local ok = exports['kairo-ui']:Progress('Réparation…', 5000, {    canCancel = true,    anim = { dict = 'mini@repair', clip = 'fixing_a_ped' },})

Menu

client
exports['kairo-ui']:Menu(id, title, items)

Ouvre un menu contextuel. Chaque élément peut déclencher une fonction ou ouvrir un sous-menu.

ParamètreTypeDescription
idstringIdentifiant
titlestringTitre
itemstableListe { label, description?, onSelect }

Retour rien

exemple.lua
exports['kairo-ui']:Menu('garage', 'Garage', {    { label = 'Sortir un véhicule', onSelect = openList },    { label = 'Ranger', onSelect = store },})

Input

client
exports['kairo-ui']:Input(title, fields)

Boîte de saisie avec un ou plusieurs champs (texte, nombre, liste).

ParamètreTypeDescription
titlestringTitre
fieldstableListe { type, label, required? }

Retour table? — les valeurs saisies, ou nil si annulé

exemple.lua
local values = exports['kairo-ui']:Input('Amende', {    { type = 'number', label = 'Montant', required = true },    { type = 'text', label = 'Motif' },})

TextUI

client
exports['kairo-ui']:TextUI(text) / HideTextUI()

Aide affichée à l'écran, par exemple « [E] Ouvrir le coffre ».

ParamètreTypeDescription
textstringTexte de l'aide

Retour rien

exemple.lua
exports['kairo-ui']:TextUI('[E] Ouvrir le coffre')-- plus tardexports['kairo-ui']:HideTextUI()

FAQ

Puis-je changer l'apparence ?

La couleur d'accent, la position et les sons se règlent dans config.lua. Les styles complets sont dans html/style.css si tu veux aller plus loin.