Aller au contenu principal

Thème du Menu

Le menu dans zUI est un élément essentiel pour créer une interface interactive. Vous pouvez personnaliser son apparence, sa position, et ajouter des animations pour améliorer l'expérience utilisateur.

Personnalisation du Menu​

Le fichier theme.json vous permet de configurer plusieurs aspects du menu, notamment sa position, son style, ses couleurs, et ses animations. Vous pouvez aussi ajuster les paramètres des éléments comme les titres, les descriptions, et les contrôles.

1. Position​

Vous pouvez définir la position du menu à l'aide de l'option position :

  • "left" : Le menu apparaît à gauche de l'écran.
  • "right" : Le menu apparaît à droite de l'écran.

2. Affichage de la Description​

L'option displayDescription permet d'afficher ou de masquer la description du menu. Définissez-le comme suit :

  • "true" : Afficher la description.
  • "false" : Masquer la description.

3. Affichage de l'Indicateur de Contrôles​

L'option displayControlsIndicator permet d'afficher ou de masquer l'indicateur de contrôles pour les éléments interactifs.

4. Couleurs​

Vous pouvez personnaliser les couleurs de différents éléments du menu en ajustant les paramètres suivants :

  • background : La couleur de fond du menu (ex : "rgba(18, 18, 18, 0.5)").
  • description : La couleur de la description du menu (ex : "#121212").
  • controlsIndicator : La couleur de l'indicateur de contrôles (ex : "#121212").
  • item : La couleur des éléments du menu (ex : "#faad2c").

5. Animations​

Le menu peut comporter des animations pour son entrée, sa sortie et son comportement au défilement. Voici les options d'animations disponibles dans le fichier theme.json :

Animations d'Entrée​

  • fadeIn : Fait apparaître le menu en augmentant progressivement son opacité de 0 à 1.
  • slideInHorizontal : Fait glisser le menu horizontalement, depuis la gauche ou la droite, selon la position.
  • slideInVertical : Fait glisser le menu verticalement, depuis le haut.

Animations de Sortie​

  • fadeOut : Fait disparaître le menu en diminuant progressivement son opacité.
  • slideOutHorizontal : Fait glisser le menu horizontalement, depuis la gauche ou la droite, selon la position.
  • slideOutVertical : Fait glisser le menu verticalement vers le haut.

Paramètres de Défilement​

  • onScroll : Définissez-le sur true pour activer une animation lors du défilement du menu.

6. Polices​

Le menu utilise différentes polices pour ses titres, descriptions, et éléments. Ces polices doivent être spécifiées exclusivement via l'API de Google Fonts. Vous pouvez personnaliser les polices comme suit :

  • title : La police pour le titre du menu.
  • subtitle : La police pour les sous-titres.
  • description : La police pour la description des éléments du menu.
  • counter : La police pour les compteurs affichés.
  • itemTitle : La police pour le titre des éléments du menu.
  • itemRightLabel : La police pour les labels des éléments du menu.
  • info : La police pour les informations supplémentaires.
  • infoPanelTitle : La police pour les titres du panneau d'informations.

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

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

7. Bannière​

Vous pouvez définir la couleur de la bannière du menu avec l'option banner. Par exemple, utilisez "#FAAD2C" pour une couleur orange.

8. Coins Arrondis​

L'option cornersRadius permet de définir le rayon des coins du menu. Une valeur de 1 donne des coins légèrement arrondis.

9. Perspective​

L'option perspective permet d'ajouter une perspective 3D au menu si vous définissez cette option sur true.

10. Padding​

Vous pouvez définir l'option padding sur true pour ajouter de l'espace entre les éléments du menu et ses bords.

11. Éléments du Menu​

Vous pouvez personnaliser les éléments du menu avec les paramètres suivants :

  • maxItems : Le nombre maximum d'éléments à afficher dans le menu.
  • hoverStyle : Le style à appliquer aux éléments du menu lors du survol (par exemple, "complete").
  • hoverColor : La couleur des éléments lors du survol (par exemple, "#FAAD2C").
  • lineIsRounded : Définissez sur true pour des bordures arrondies sur les lignes d'éléments.

Exemple de theme.json pour le Menu​

{
  "position": "left",
  "displayDescription": true,
  "displayControlsIndicator": true,
  "colors": {
    "background": "rgba(18, 18, 18, 0.5)",
    "description": "#121212",
    "controlsIndicator": "#121212",
    "item": "#faad2c"
  },
  "animations": {
    "entry": "fadeIn",
    "exit": "fadeOut",
    "onScroll": true
  },
  "fonts": {
    "title": "https://fonts.googleapis.com/css2?family=Lexend:wght@900&display=swap",
    "subtitle": "https://fonts.googleapis.com/css2?family=Lexend:wght@300&display=swap",
    "description": "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@700&display=swap",
    "counter": "https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@400&display=swap",
    "itemTitle": "https://fonts.googleapis.com/css2?family=Lexend:wght@500&display=swap",
    "itemRightLabel": "https://fonts.googleapis.com/css2?family=Lexend:wght@200&display=swap",
    "info": "https://fonts.googleapis.com/css2?family=Lexend:wght@200&display=swap",
    "infoPanelTitle": "https://fonts.googleapis.com/css2?family=Lexend:wght@500&display=swap"
  },
  "banner": "#FAAD2C",
  "cornersRadius": 1,
  "perspective": false,
  "padding": false,
  "items": {
    "maxItems": 10,
    "hoverStyle": "complete",
    "hoverColor": "#FAAD2C",
    "lineIsRounded": true
  }
}

Résumé​

Vous avez la possibilité de personnaliser entièrement l'apparence et le comportement du menu de zUI en ajustant des paramètres tels que la position, les couleurs, les animations, et les polices (exclusivement via Google Fonts). Ce niveau de personnalisation vous permet de créer une interface unique et engageante pour vos utilisateurs.

Information complémentaire​

N'oubliez pas de partager votre thème personnalisé dans notre Serveur Discord Support, afin que d'autres utilisateurs puissent en profiter. Devenez créateur de thème et gagnez l'appréciation de la communauté !