Interfaces: menus, inputs and NUI · Lesson 2/3 · 8 min

ox_lib: the modern alternative

Many modern QBCore servers use ox_lib for menus, inputs and notifications. It's worth knowing.

ox_lib is a widely used library that provides context menus, input dialogs, notifications and much more, with a more polished look. More and more QBCore resources require it as a dependency.

Context menu

lua

lib.registerContext({
  id = 'taller_menu',
  title = 'Mechanic workshop',
  options = {
    { title = 'Repair', description = 'Costs $500', event = 'mecanico:client:reparar' },
    { title = 'Exit', icon = 'xmark' },
  },
})
lib.showContext('taller_menu')

lib.registerContext

Input and notification

lua

local input = lib.inputDialog('Transfer', {
  { type = 'number', label = 'Amount', required = true },
})
if input then
  TriggerServerEvent('banco:server:transferir', tonumber(input[1]))
end

lib.notify({ title = 'Done', description = 'Transfer sent', type = 'success' })

lib.inputDialog / lib.notify

To use ox_lib, add '@ox_lib/init.lua' to shared_scripts of your fxmanifest and declare dependency 'ox_lib'. The decision to use qb-menu/qb-input or ox_lib depends on what your server already runs; it's best to follow your base's standard.

Practice what you learned

0/3

Ordena el código

Ordena un menú de contexto de ox_lib que se registra y se muestra.

Coloca las líneas en el orden correcto con las flechas.

options = {

},

})

lib.showContext('mi_menu')

title = 'Tienda',

id = 'mi_menu',

lib.registerContext({

{ title = 'Comprar', icon = 'cart', onSelect = function() TriggerEvent('tienda:comprar') end },

Pista

Primero registras el contexto con su id y opciones; al final lo muestras con ese mismo id.

Rellena los huecos

Completa la llamada de ox_lib que pide datos al jugador con un cuadro de input.

1local input = lib.('Título', {

2 { type = 'number', label = 'Cantidad' },

3})

4if input then TriggerServerEvent('banco:transferir', input[1]) end

Pista

Es el diálogo moderno de ox_lib; devuelve una tabla indexada (input[1], input[2]...).

Test

¿Cómo muestras una notificación de éxito con ox_lib?

Challenge: code it yourself

Recreate the ATM menu (Deposit/Withdraw) from the previous lesson, but with ox_lib (lib.registerContext).

Write it yourself in your editor (VS Code) and test it on your server. You learn here by doing it, not by copying.

See hint

lib.registerContext({ id, title, options = {...} }) + lib.showContext(id); '@ox_lib/init.lua' in shared_scripts.

Escribe aquí tu solución:

← Menus and forms with qb-menu and qb-input Next: Your own NUI: when menus aren't enough

How was this lesson?