-- Example 1: Using Predefined Style
exports["is_ui"]:Notify("Test", "Lorem ipsum <span>adipiscing elit</span>.", 5000, "info")
-- Example 2: Using Predefined Style with Custom Icon
exports["is_ui"]:Notify("Test", "Lorem ipsum adipiscing elit.", 5000, "info", "fa-regular fa-thumbs-up")
-- Example 3: Using Custom Style
local style = {
icon = "fa-solid fa-sack-dollar",
primaryColor = "#FF425D",
backgroundIcon = { from = "#FC3955", to = "#861A20" },
sound = { play = true, type = "notifySound6", volume = 5 }
}
exports["is_ui"]:Notify("Test", "Lorem adipiscing elit.", 5000, style)
-- Example 1: Using Predefined Style
TriggerClientEvent("is_ui:Notify", source, "Test", "Lorem ipsum <span>adipiscing elit</span>.", 5000, "info")
-- Example 2: Using Predefined Style with Custom Icon
TriggerClientEvent("is_ui:Notify", source, "Test", "Lorem ipsum adipiscing elit.", 5000, "info", "fa-regular fa-thumbs-up")
-- Example 3: Using Custom Style
local style = {
icon = "fa-solid fa-sack-dollar",
primaryColor = "#FF425D",
backgroundIcon = { from = "#FC3955", to = "#861A20" },
sound = { play = true, type = "notifySound6", volume = 5 }
}
TriggerClientEvent("is_ui:Notify", "Test", "Lorem adipiscing elit.", 5000, style)
Default Notifications
To quickly change default Notifications, go to the given file and replace the functions to call our export.
QBCore
qb-core -> client -> functions.lua
function QBCore.Functions.Notify(text, style, duration, icon, title)
local title = title or nil
local icon = icon or nil
if style == "primary" then style = "info" end
exports["is_ui"]:Notify(title, text, tonumber(duration), style, icon)
end
ESX
es_extended -> client -> functions.lua
function ESX.ShowNotification(text, style, duration, title, icon)
exports["is_ui"]:Notify(title or nil, text or "Example Message", tonumber(duration), style or "info", icon or nil)
end
function lib.notify(data)
local title = data.title or nil
local message = data.description or nil
local duration = data.duration or nil
local style = data.type or nil
local icon = data.icon or nil
exports["is_ui"]:Notify(title, message, duration, style, icon)
end
Progress Bar
The Progress Bar can only be invoked on the Client-Side!
exports["is_ui"]:ProgressBar(data)
exports["is_ui"]:cancelProgressBar()
exports["is_ui"]:IsProgressBarActive()
data: table
title: string
icon: string or nil
default: fa-solid fa-user
duration: number or nil
default: 5000
useWhileDead: boolean or nil
default: false
canCancel: boolean or nil
default: false
prop: indexed table or nil
hash: string
bone: number or nil
default: 60309
position: table
x: number
default: 0.0
y: number
default: 0.0
z: number
default: 0.0
rotation: table
x: number
default: 0.0
y: number
default: 0.0
z: number
default: 0.0
animation: table or nil
dict: string
anim: string
blendIn: number or nil
default: 3.0
blendOut: number or nil
default: 3.0
duration: number or nil
default: -1
flag: number or nil
default: 49
playbackRate: number or nil
default: 0
lockX: boolean or nil
default: false
lockY: boolean or nil
default: false
lockZ: boolean or nil
default: false
scenario: table or nil
name: string
enterAnim: boolean or nil
default: true
disable: table or nil
move: boolean or nil
default: false
car: boolean or nil
default: false
combat: boolean or nil
default: false
mouse: boolean or nil
default: false
sprint: boolean or nil
default: false
Example Usage
-- Example 1: Simple operation
local status = exports["is_ui"]:ProgressBar({
title = "Test",
icon = "fa-solid fa-user",
duration = 5000,
useWhileDead = false,
canCancel = false,
animation = {
dict = "amb@prop_human_movie_bulb@base",
anim = "base",
},
})
if status == true then
print("done")
elseif status == false then
print("cancel")
end
-- Example 2: Advanced operation
local status = exports["is_ui"]:ProgressBar({
title = "Test",
icon = "fa-solid fa-user",
duration = 5000,
useWhileDead = false,
canCancel = false,
prop = {
{
hash = "bkr_prop_weed_lrg_01b",
bone = 60309,
position = {x = 0.0, y = 0.0, z = 0.0},
rotation = {x = 0.0, y = 0.0, z = 0.0},
}
},
animation = {
dict = "amb@prop_human_movie_bulb@base",
anim = "base",
blendIn = 3.0,
blendOut = 3.0,
duration = -1,
flag = 0,
playbackRate = 0,
lockX = false,
lockY = false,
lockZ = false
},
-- scenario = {
-- name = "WORLD_HUMAN_PAPARAZZI",
-- enterAnim = true
-- },
disable = {
move = true,
car = true,
combat = true,
mouse = true,
sprint = true
},
})
if status == true then
print("function done")
elseif status == false then
print("function cancel")
end
Default Progress Bar
To quickly change default Progress Bar, go to the given file and replace the functions to call our export.
QBCore
qb-core -> client -> functions.lua
function QBCore.Functions.Progressbar(name, label, duration, useWhileDead, canCancel, disableControls, animation, prop, propTwo, onFinish, onCancel, icon)
if prop and prop.model then
prop[1] = {
hash = prop.model,
bone = prop.bone or nil,
position = prop.coords or nil,
rotation = prop.rotation or nil,
}
end
if animation and animation.task then
local scenario = {
name = animation.task,
enterAnim = true
}
animation = nil
elseif animation and animation.animDict and animation.anim then
animation = {
dict = animation.animDict,
anim = animation.anim,
blendIn = animation.blendIn,
blendOut = animation.blendOut,
duration = animation.duration,
flag = animation.flags,
playbackRate = animation.playbackRate,
lockX = animation.lockX,
lockY = animation.lockY,
lockZ = animation.lockZ
}
end
if type(disableControls) == "table" then
local disable = {
move = disableControls.disableMovement,
car = disableControls.disableCarMovement,
combat = disableControls.disableCombat,
mouse = disableControls.disableMouse,
sprint = disableControls.disableSprint
}
end
local status = exports["is_ui"]:ProgressBar({
title = label,
icon = icon,
duration = duration,
useWhileDead = useWhileDead,
canCancel = canCancel,
prop = prop,
animation = animation,
scenario = scenario,
disable = disable
})
if status == true then
if onFinish then
onFinish()
end
elseif status == false then
if onCancel then
onCancel()
end
end
end
ESX
es_extended -> client -> functions.lua
function ESX.Progressbar(title, duration, Options)
if Options.prop and Options.prop.hash then
prop[1] = {
hash = Options.prop.hash,
bone = Options.prop.bone or nil,
position = Options.prop.position or nil,
rotation = Options.prop.rotation or nil,
}
end
if Options.animation and Options.animation.type == "Scenario" then
local scenario = {
name = Options.animation.Scenario,
enterAnim = Options.animation.enterAnim
}
elseif Options.animation and Options.animation.type == "anim" then
local animation = {
dict = Options.animation.dict,
anim = Options.animation.lib,
blendIn = Options.animation.blendIn,
blendOut = Options.animation.blendOut,
duration = Options.animation.duration,
flag = Options.animation.flag,
playbackRate = Options.animation.playbackRate,
lockX = Options.animation.lockX,
lockY = Options.animation.lockY,
lockZ = Options.animation.lockZ
}
end
if Options.disable and type(Options.disable) == "table" then
local disable = Options.disable
end
local status = exports["is_ui"]:ProgressBar({
title = title,
icon = Options.icon,
duration = duration,
useWhileDead = Options.useWhileDead,
canCancel = Options.canCancel,
prop = prop,
animation = animation,
scenario = scenario,
disable = disable
})
if status == true then
if Options.onFinish then
Options.onFinish()
end
elseif status == false then
if Options.onCancel then
Options.onCancel()
end
end
end
function lib.progressBar(data)
local prop, animation, scenario
if data.prop and data.prop[1] then
prop = {}
for _, v in ipairs(data.prop) do
table.insert(prop, {
hash = v.model,
bone = v.bone,
position = v.pos and {
x = v.pos.x,
y = v.pos.y,
z = v.pos.z,
} or {},
rotation = v.rot and {
x = v.rot.x,
y = v.rot.y,
z = v.rot.z,
} or {},
})
end
elseif data.prop and data.prop.model then
prop = {}
prop[1] = {
hash = data.prop.model,
bone = data.prop.bone,
position = data.prop.pos and {
x = data.prop.pos.x,
y = data.prop.pos.y,
z = data.prop.pos.z,
} or {},
rotation = data.prop.rot and {
x = data.prop.rot.x,
y = data.prop.rot.y,
z = data.prop.rot.z,
} or {},
}
end
if data.anim and data.anim.dict and data.anim.clip then
animation = {
dict = data.anim.dict,
anim = data.anim.clip,
blendIn = data.anim.blendIn,
blendOut = data.anim.blendOut,
duration = data.anim.duration,
flag = data.anim.flag,
playbackRate = data.anim.playbackRate,
lockX = data.anim.lockX,
lockY = data.anim.lockY,
lockZ = data.anim.lockZ,
}
elseif data.anim and data.scenario then
scenario = {
name = data.anim.scenario,
enterAnim = data.anim.playEnter,
}
end
local data = {
title = data.label,
icon = data.icon,
duration = data.duration,
useWhileDead = data.useWhileDead,
canCancel = data.canCancel,
prop = prop,
animation = animation,
scenario = scenario,
disable = data.disable,
}
return exports["is_ui"]:ProgressBar(data)
end
function lib.progressCircle(data)
return lib.progressBar(data)
end
function lib.cancelProgress()
exports["is_ui"]:cancelProgressBar()
end
function lib.progressActive()
return exports["is_ui"]:IsProgressBarActive()
end
