> For the complete documentation index, see [llms.txt](https://plug-and-play.gitbook.io/plug-and-play/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://plug-and-play.gitbook.io/plug-and-play/pap_core/modules/interface/rageui.md).

# RageUI

<details>

<summary>Création d'un menu</summary>

<sub>Voici une base de création d'un menu PAP RageUI</sub>

```lua
Core = exports["PAP_core"]
local menu   = Core:CreateMenuNUI("Main", "Gestion")
local menuSub  = Core:CreateSubMenuNUI(menu, "SubMain", "Gestion")

local isOpenMenu = false

function OpenMenu()
    if isOpenMenu then return end
    isOpenMenu = true
    
    menu:show(function ()
        Core:CreateSeparatorNUI("Separateur") 
     
        Core:CreateCheckboxNUI("Activer/Désactiver", false, false, false, { emoji = "👻"}, true, false, function(state)
            Refresh()
        end)
    end)
    Core:OpenMenuNUI(menu)
end

function Refresh() 
    Core:RefreshCurrentMenuNUI()
end
```

</details>

<details>

<summary>Création d'un bouton</summary>

* **label :** `string`
  * Texte principal du bouton.
* **sublabel :** `string`
  * Texte secondaire affiché sous le label.
* **description :** `string`
  * Description détaillée du bouton.
* **canActive:** `boolean|number`  &#x20;
  * Rendre le bouton en état **actif**, permettant l’exécution continue de la fonction.\
    Utile pour des markers ou toute fonctionnalité nécessitant une boucle `while`.
* **style :** `table|nil`
  * **emoji :** `string`
    * Emoji affiché à gauche du texte du bouton.
  * **rightlabel :** `string`&#x20;
    * Active un contour vert autour du `rightlabel`.
  * **tone :** `boolean`
    * Définit si le bouton est interactif.\
      `false` : visible mais non utilisable par le joueur.
  * **image :** `string`
    * Image affichée à droite du menu pour prévisualisation.
* **enable :** `boolean`
  * le rendre accéssible ou non au joueur, permet de montrer le bouton sans pouvoir l'utiliser
* **callback :** `function(Hover, Active, Selected)`
  * Fonction appelée selon l’état du bouton : survol, activation ou sélection.
* **subMenu** **:** `table`
  * Menu enfant à ouvrir après l’exécution du `callback`.

<pre class="language-lua"><code class="lang-lua"><strong>--- @param label       string | nil
</strong>--- @param sublabel    string | false
--- @param description string | false
--- @param canActive   boolean|number 
--- @param style       table  | false 
--- @param enable      boolean|nil
--- @param callback    function(Hover, Active, Selected)
--- @param subMenu     table|nil
Core:CreateButtonNUI("Button Nui", false, false, false, { emoji = "🎲", rightLabel = "→"}, true, function(Hover, Active, Selected)
    if Selected then
        Spectate.randomPlayer()
        Refresh()
    end
end, nextMenu)
</code></pre>

</details>

<details>

<summary>Création d'un séparateur</summary>

* **label :** `string`
  * Texte principal du bouton.

<pre class="language-lua"><code class="lang-lua"><strong>--- @param label  string | nil
</strong>Core:CreateButtonNUI("Button Nui")
</code></pre>

</details>

<details>

<summary>Création d'une checkbox</summary>

* **label :** `string`
  * Texte principal du bouton.
* **sublabel :** `string`
  * Texte secondaire affiché sous le label.
* **description :** `string`
  * Description détaillée du bouton.
* **canActive:** `boolean|number`  &#x20;
  * Rendre le bouton en état **actif**, permettant l’exécution continue de la fonction.\
    Utile pour des markers ou toute fonctionnalité nécessitant une boucle `while`.
* **style :** `table|nil`
  * **emoji :** `string`
    * Emoji affiché à gauche du texte du bouton.
  * **image :** `string`
    * Image affichée à droite du menu pour prévisualisation.
* **enable :** `boolean`
  * le rendre accessible ou non au joueur, permet de montrer le bouton sans pouvoir l'utiliser
* **initialValue :** `boolean`
  * initialisation de l'état de la checkbox
* **onChange :** `function(Etat, Active)`
  * Fonction appelée selon l’état du bouton : l'état ou l'activation.

```lua
---@param label string
---@param sublabel string|nil
---@param description string|nil
---@param canActive boolean|nil
---@param style table|nil
---@param enable boolean
---@param initialValue boolean
---@param onChange function
Core:CreateCheckboxNUI("Freeze/Unfreeze", false, false,false, { emoji = "🧊"}, HasNecessaryRank(Access.Freeze), IsEntityPositionFrozen(PlayerSelected.ped), function(Etat, Active) 
     if Active then
          print("Active")
     end
     TriggerServerEvent("PAP_admin:freezePlayer", PlayerSelected.serverId, etat)
end)

```

</details>

<details>

<summary>Création d'un slider</summary>

* **label :** `string`
  * Texte principal du bouton.
* **sublabel :** `string`
  * Texte secondaire affiché sous le label.
* **description :** `string`
  * Description détaillée du bouton.
* **canActive:** `boolean|number`  &#x20;
  * Rendre le bouton en état **actif**, permettant l’exécution continue de la fonction.\
    Utile pour des markers ou toute fonctionnalité nécessitant une boucle `while`.
* **style :** `table|nil`
  * **emoji :** `string`
    * Emoji affiché à gauche du texte du bouton.
  * **image :** `string`
    * Image affichée à droite du menu pour prévisualisation.
* **enable :** `boolean`
  * Le rendre accessible ou non au joueur, permet de montrer le bouton sans pouvoir l'utiliser
* **min:** `number`
  * Valeur minimale du slider.
* **max :** `number`
  * Valeur maximale du slider.
* **step :** `number`
  * Incrément appliqué à chaque modification.
* **initial :** `number`
  * Valeur initiale du slider.
* **onChange :** `function(Current, Selected, Active)`
  * Fonction appelée selon l’état du bouton : l'état ou l'activation.

```lua
---@param label string
---@param sublabel string
---@param description string
---@param canActive boolean
---@param style table|nil
---@param enable boolean
---@param min number
---@param max number
---@param step number
---@param initial number
---@param onChange function
Core:CreateSliderNUI("Volume", "Niveau sonore", false,{ emoji = "🎚️", tone = "ok" }, HasNecessaryRank(Access),0, 100, 1, 50,function(Current, Selected, Active)
    print("[TEST] Slider Current =", json.encode(Current)) 
    print("[TEST] Slider Selected, Active= ", Selected, Active)
end)

```

</details>

<details>

<summary>Création d'une liste</summary>

* **label :** `string`
  * Texte principal du bouton.
* **sublabel :** `string`
  * Texte secondaire affiché sous le label.
* **description :** `string`
  * Description détaillée du bouton.
* **canActive:** `boolean|number`  &#x20;
  * Rendre le bouton en état **actif**, permettant l’exécution continue de la fonction.\
    Utile pour des markers ou toute fonctionnalité nécessitant une boucle `while`.
* **style :** `table|nil`
  * **emoji :** `string`
    * Emoji affiché à gauche du texte du bouton.
  * **image :** `string`
    * Image affichée à droite du menu pour prévisualisation.
* **enable :** `boolean`
  * Le rendre accessible ou non au joueur, permet de montrer le bouton sans pouvoir l'utiliser
* **options:** `table`
  * Valeur incluant des `label`  qui défilerons à droite du bouton.
* **initalIndex:** `number`
  * Valeur initale de l'options
* **callback:** `function(Current, Selected, Active)`
  * Fonction appelée selon l’état du bouton : l'état ou l'activation.

```lua
local labelTeleporte = {"Gare", "Hopital", "Garage"}

---@param label string | false
---@param sublabel string | false
---@param description string | false
---@param canActive boolean|number
---@param style table | false
---@param enable boolean
---@param options table
---@param initialIndex number
---@param callback function
Core:CreateListNUI("Téléporter à :", false, false, false, { emoji = "🧭" }, true, labelTeleporte, 1, function(Current, Selected, Active) 
    if Selected then
        print("téléportation a l'index", Current.index)
    end
end)

```

</details>

<details>

<summary>Basculer souris/clavier</summary>

Activation de la souris afin de permettre la navigation dans le menu.

```lua
--- @param mouseEnabled boolean|nil
Core:SetHeaderStateNUI(true)
```

Activation de la souris afin de permettre la navigation dans l’UI, évitant les conflits avec l’ouverture du menu ou l’activation involontaire de fonctionnalités.

```lua
--- @param bool boolean|nil
Core:SetKeyboardActive(true)
```

</details>

<details>

<summary>Etat du menu</summary>

Récupérer le menu active

```lua
local menu = Core:GetCurrentMenu()
menu:showMenu()
```

Savoir si un menu est ouvert

```lua
local menu   = Core:CreateMenuNUI("Main", "Gestion")
local isOpen = Core:IsMenuOpen(menu)
print("isOpen", isOpen)
```

</details>

<details>

<summary>Ouvrir/Fermer un menu</summary>

Ouvrir le menu principal

```lua
---@param title string
---@param subtitle string
---@return table
local menu   = Core:CreateMenuNUI("Main", "Gestion")
Core:OpenMenuNUI(menu)
```

Fermer le menu actuel

```lua
Core:CloseCurrentMenuNUI()
```

</details>

<details>

<summary>Cacher/Monter un menu</summary>

Montrer le menu ouvert

```lua
Core:ShowMenuNUI(menu)
```

Cacher le menu ouvert

```lua
Core:HideMenuNUI()
```

</details>

<details>

<summary>Rafraichir le menu</summary>

<sub>Le menu ne tourne pas en boucle, il faut le rafraichir des qu'une nouvelle information arrive</sub>

```lua
Core = exports["PAP_core"]

Core:RefreshCurrentMenuNUI()
```

</details>