Notify

Description

Notify est un système de notifications moderne et hautement personnalisable pour votre serveur FiveM. Il remplace les notifications par défaut par une interface élégante et professionnelle.

Fonctionnalités principales :

• Interface moderne et animée
• Plusieurs types de notifications (success, error, info, warning)
• Notifications progressives (barre de progression)
• Notifications avec icônes personnalisables
• Support des notifications persistantes
• Animations fluides
• Entièrement personnalisable

Installation

Prérequis

• qb-core - Framework QB-Core
• Un serveur FiveM avec les permissions appropriées

ensure cn-notify

Intégration QB-Core

Pour utiliser CN-Notify avec QB-Core, vous devez intégrer la fonction de notification dans QB-Core.

Côté Client

Copiez le code suivant dans qb-core/client/functions.lua :

-- QB-Core Notification System
function QBCore.Functions.Notify(text, type, duration)
    if type == nil then type = 'inform' end
    if duration == nil then duration = 5000 end
    
    SendNUIMessage({
        action = 'show',
        type = type,
        message = text,
        duration = duration
    })
end

Configuration

Ouvrez le fichier config.lua :

Config = {}

-- Position des notifications (top-left, top-right, top-center, bottom-left, etc.)
Config.Position = "top-right"

-- Durée par défaut (en ms)
Config.DefaultDuration = 5000

-- Animation
Config.Animation = {
    duration = 300,
    type = "slide" -- slide, fade, scale
}

-- Sons (optionnel)
Config.Sounds = {
    enabled = true,
    success = "success",
    error = "error",
    info = "info",
    warning = "warning"
}

Types de notifications disponibles

• success - Notification verte (succès)
• error - Notification rouge (erreur)
• inform - Notification bleue (information, par défaut)
• warning - Notification jaune (avertissement)

Utilisation

Utilisation avec QB-Core

Une fois l'intégration QB-Core effectuée, vous pouvez utiliser les notifications de manière simple :

-- Notification de base
QBCore.Functions.Notify('Ceci est une notification')

-- Avec type personnalisé et durée
QBCore.Functions.Notify('Opération réussie!', 'success', 3000)
QBCore.Functions.Notify('Quelque chose s\'est mal passé!', 'error')

-- Exemples avec différents types
QBCore.Functions.Notify('Information importante', 'inform', 5000)
QBCore.Functions.Notify('Attention!', 'warning', 4000)

Utilisation avec les exports

Vous pouvez également utiliser directement les exports pour plus de contrôle :

-- Notification de succès
exports['cn-notify']:Notify("success", "Opération réussie!", "Votre action a été effectuée avec succès.")

-- Notification d'erreur
exports['cn-notify']:Notify("error", "Erreur!", "Une erreur s'est produite.")

-- Notification d'information
exports['cn-notify']:Notify("info", "Information", "Voici une information importante.")

-- Notification d'avertissement
exports['cn-notify']:Notify("warning", "Attention!", "Faites attention à cette action.")

Notifications avec durée personnalisée

exports['cn-notify']:Notify("success", "Titre", "Message", 10000) -- 10 secondes

Notifications progressives

-- Démarrer une notification progressive
local notifyId = exports['cn-notify']:NotifyProgress("Téléchargement", 0)

-- Mettre à jour la progression
exports['cn-notify']:UpdateProgress(notifyId, 50) -- 50%

-- Terminer la notification
exports['cn-notify']:FinishProgress(notifyId, "Téléchargement terminé!")

Notifications persistantes

-- Notification qui ne disparaît pas automatiquement
local notifyId = exports['cn-notify']:NotifyPersistent("info", "Titre", "Message")

-- Fermer manuellement
exports['cn-notify']:Close(notifyId)

Personnalisation

Couleurs

Modifiez les couleurs dans html/style.css :

:root {
    --notify-success: #10b981;
    --notify-error: #ef4444;
    --notify-info: #3b82f6;
    --notify-warning: #f59e0b;
}

Animations personnalisées

Créez vos propres animations dans html/script.js :

const customAnimation = {
    enter: (element) => {
        element.style.transform = 'translateX(100%)';
        setTimeout(() => {
            element.style.transition = 'transform 0.3s';
            element.style.transform = 'translateX(0)';
        }, 10);
    },
    exit: (element) => {
        element.style.transform = 'translateX(100%)';
    }
};

Support

Pour toute question, contactez-nous via Discord.