Stylisation

Stylisation Globale

La stylisation globale de votre application est accessible depuis le bouton Palette de la barre supérieure de l'éditeur. Vous pouvez mettre à jour les couleurs primaires et de contenu, les nuances seront automatiquement générées.

Notez que vous pouvez faire correspondre les couleurs de l'éditeur avec celles de votre application en utilisant l'option de correspondance de l'éditeur. Cela peut rendre la construction plus confortable pour vos yeux.

Stylisation des Éléments

Chaque élément de votre projet peut être stylisé individuellement dans l'inspecteur, sous l'onglet style. Cela vous permet de personnaliser l'apparence de chaque composant de votre application, comme le texte, les images ou les boutons.

Pour ajouter une catégorie de style (par exemple, couleur, typographie, taille), cliquez simplement sur le bouton + dans l'onglet style. Vous pouvez activer ou désactiver chaque propriété en cliquant sur son nom.

Certaines propriétés acceptent deux valeurs, comme la translation (X/Y) ou l'espacement (horizontal/vertical). Luna Park affiche alors deux champs d'entrée, chacun avec son menu d'unité, modifiables indépendamment.

Note : Toutes les règles de stylisation disponibles dans Luna Park correspondent aux règles CSS trouvées dans les standards du web.

Quick style panels

Pour les modifications courantes, certaines catégories de style sont accessibles directement depuis le layout builder, sans passer par l'onglet style de l'inspecteur. Sélectionnez un élément pour faire apparaître les quick style panels (bordure, arrière-plan, taille, espacement, texte, ombre, etc.).

Tokens de design

Luna Park permet également l'utilisation de tokens de design. Ce sont des valeurs réutilisables qui garantissent un style cohérent dans toute l'application. Par exemple, vous pouvez définir une couleur principale et l'utiliser partout dans votre application. Cela facilite la gestion des styles et permet des modifications globales rapides.

Pour utiliser un token de design :

1. Passez la souris sur la valeur que vous souhaitez modifier.
2. Cliquez sur l'icône de lien pour passer en mode de sélection de token de design.
3. Sélectionnez le token de design que vous souhaitez utiliser.

Variables de style

Il est également possible d'utiliser des variables pour styliser vos composants. Ces variables peuvent être utilisées dans les propriétés de style de vos composants. Cela vous permet de créer des styles dynamiques qui changent en fonction de l'état de votre application.

Pour utiliser une variable dans une propriété de votre composant :

1. Passez la souris sur la valeur que vous souhaitez lier à une variable.
2. Cliquez sur l'icône d'éclair pour passer en mode de sélection de variable.
3. Sélectionnez la variable que vous souhaitez utiliser.

Note : Seules les variables correspondant au type attendu pour cette propriété seront disponibles dans la liste. Par exemple, une variable numérique n'apparaîtra que pour une propriété attendue comme étant un nombre.