Aller au contenu principal

Thème des Notifications

Les notifications de zUI permettent de personnaliser les messages affichés à l'utilisateur en fonction de l'événement ou du contexte. Elles peuvent être configurées pour s'afficher avec différentes couleurs, animations et polices, offrant ainsi une expérience utilisateur plus interactive et esthétique.

Personnalisation des Notifications​

Le fichier theme.json permet de configurer les aspects suivants des notifications : couleurs, animations, polices, et autres options spécifiques pour différents types de notifications.

1. Couleurs​

Vous pouvez personnaliser les couleurs des notifications avec les options suivantes :

  • background : La couleur de fond de la notification (ex : "rgba(18, 18, 18, 0.5)").
  • timer : La couleur du minuteur ou de l'icône de temporisation dans la notification (ex : "white").

2. Animations​

Les notifications peuvent inclure des animations d'entrée et de sortie. Voici les animations disponibles dans le fichier theme.json :

HelpNotifications​

Animation d'Entrée​
  • fadeIn : Fait apparaître la notification en augmentant son opacité de 0 à 1.
  • slideInHorizontal : Fait entrer la notification horizontalement depuis la gauche.
  • slideInVertical : Fait entrer la notification verticalement depuis le haut.
  • popIn : Fait apparaître la notification avec un effet de zoom, passant d'un état de scale: 0 à scale: 1.
Animations de Sortie​
  • fadeOut : Fait disparaître la notification en diminuant son opacité de 1 à 0.
  • popOut : Fait disparaître la notification avec un effet de zoom, passant d'un état de scale: 1 à scale: 0.
  • slideOutHorizontal : Fait disparaître la notification horizontalement vers la gauche.
  • slideOutVertical : Fait disparaître la notification verticalement vers le bas.

Notifications​

Animation d'Entrée​
  • fadeIn : Fait apparaître la notification en augmentant son opacité de 0 à 1.
  • slideInHorizontal : Fait entrer la notification horizontalement depuis la gauche.
Animations de Sortie​
  • fadeOut : Fait disparaître la notification en diminuant son opacité de 1 à 0.
  • slideOutHorizontal : Fait disparaître la notification horizontalement vers la gauche.

PulsingNotifications​

Animation d'Entrée​
  • fadeIn : Fait apparaître la notification en augmentant son opacité de 0 à 1.
  • popIn : Fait apparaître la notification avec un effet de zoom, passant d'un état de scale: 0 à scale: 1.
Animations de Sortie​
  • fadeOut : Fait disparaître la notification en diminuant son opacité de 1 à 0.
  • popOut : Fait disparaître la notification avec un effet de zoom, passant d'un état de scale: 1 à scale: 0.

Exemple d'Animation de Notification​

"animations": {
  "entry": "fadeIn",
  "exit": "fadeOut"
}

3. Polices​

Les notifications utilisent différentes polices spécifiées via l'API Google Fonts. Voici les options de polices que vous pouvez personnaliser :

  • key : La police pour les clés ou éléments principaux.
  • pulsingDescription : La police pour la description des notifications pulsatantes.
  • notificationTitle : La police pour le titre des notifications.
  • notificationDescription : La police pour la description des notifications.
  • notificationType : La police pour le type de notification (ex : info, warning).
  • helpNotification : La police pour les notifications d'aide.

Exemple d'utilisation d'une police depuis Google Fonts :

"notificationTitle": "https://fonts.googleapis.com/css2?family=Lexend:wght@900&display=swap"

4. Notifications Pulsantes​

Les pulsing notifications sont des notifications spéciales qui attirent l'attention avec un effet de "pulsation". Vous pouvez personnaliser leur couleur et les animations d'entrée et de sortie comme suit :

  • defaultColor : La couleur de base des notifications pulsatantes (ex : "#faad2c").
  • animations : Les animations utilisées pour l'entrée et la sortie des notifications pulsatantes (par exemple, popIn pour l'entrée et popOut pour la sortie).

5. Notifications d'Aide​

Les help notifications sont utilisées pour afficher des informations ou de l'aide à l'utilisateur. Elles utilisent des animations d'entrée et de sortie spécifiques comme slideInVertical et slideOutVertical.

Exemple de theme.json pour les Notifications​

{
  "notifications": {
    "colors": {
      "background": "rgba(18, 18, 18, 0.5)",
      "timer": "white"
    },
    "animations": {
      "entry": "fadeIn",
      "exit": "fadeOut"
    }
  },
  "pulsingNotifications": {
    "defaultColor": "#faad2c",
    "animations": {
      "entry": "popIn",
      "exit": "popOut"
    }
  },
  "helpNotifications": {
    "defaultColor": "#faad2c",
    "animations": {
      "entry": "slideInVertical",
      "exit": "slideOutVertical"
    }
  },
  "fonts": {
    "key": "https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap",
    "pulsingDescription": "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@400&display=swap",
    "notificationTitle": "https://fonts.googleapis.com/css2?family=Lexend:wght@900&display=swap",
    "notificationDescription": "https://fonts.googleapis.com/css2?family=Lexend:wght@200&display=swap",
    "notificationType": "https://fonts.googleapis.com/css2?family=Lexend:wght@800&display=swap",
    "helpNotification": "https://fonts.googleapis.com/css2?family=Lexend:wght@500&display=swap"
  }
}

Résumé​

Les notifications dans zUI offrent une flexibilité maximale en termes de personnalisation, des couleurs aux animations, en passant par les polices de caractères (toutes fournies par l'API de Google Fonts). Vous pouvez adapter l'apparence et le comportement des notifications à vos besoins pour offrir une expérience utilisateur dynamique et fluide.

Information complémentaire​

Partagez vos notifications personnalisées dans notre Serveur Discord Support pour permettre à d'autres utilisateurs de les adopter. Devenez créateur de notifications et gagnez l'appréciation de la communauté !