Interface et style

Interface et styling

Résumé express : Créer une application type Trello avec Luna Park en utilisant des blocs, styles et composants réutilisables pour gérer listes et cartes.

1. Création du projet

1. Ouvrir Luna Park et accéder au dashboard
2. Créer un nouveau projet nommé "Trebo"
3. Faire clic droit dans l'explorateur → Créer une nouvelle page "main"

2. Configuration du conteneur principal

Créer le conteneur de base

• Un bloc apparaît en bas à gauche (équivalent d'une div HTML)
• Cliquer sur le bloc pour accéder au panel de style à droite
• Ajouter un style avec le bouton "+" :
• Background : choisir une couleur temporaire
• Height : 100% pour couvrir toute la page
• Renommer le bloc en "Container"

Définir la palette de couleurs

• Aller dans la palette en haut de l'interface
• Modifier les couleurs primaires et secondaires (style retro wave/violet)
• Les tokens de couleurs se génèrent automatiquement

3. Création du header

1. Cliquer sur "+" dans le conteneur pour ajouter un nouveau bloc
2. Renommer ce bloc "Header"
3. Ajouter les styles :

• Background : utiliser un token "deepest" de la palette
• Height : définir en pixels (ex: 60px)
• Display : flex
• Flex-direction : column
• Justify-content : center
• Padding : 16px

Ajouter le titre

1. Cliquer sur "+" dans le header
2. Transformer le bloc en "Custom text" via l'icône carrée
3. Écrire le texte "Mon Tableau Trebo"
4. Styliser le texte :

• Font-weight : bold
• Font-size : 1.5rem

4. Zone de contenu principal

1. Créer un nouveau bloc sous le header, le nommer "Content"
2. Ajouter un padding pour éviter que les cartes touchent les bords
3. Styliser avec :

• Display : flex
• Gap : 12px (pour espacer les cartes)

5. Création des cartes

Structure d'une carte

1. Dans "Content", créer un bloc nommé "Card"
2. Ajouter les styles de base :

• Background : token de la palette
• Width : 230px (au lieu de 100%)
• Padding : utiliser un token de spacing
• Border-radius : 12px
• Display : flex
• Flex-direction : column

Ajouter le titre de la carte

1. Créer un "Custom text" dans la carte
2. Écrire "À faire" (par exemple)
3. Ajouter :

• Padding : token "s"
• Font-weight : bold

Ajouter des éléments dans la carte

1. Créer plusieurs "Custom text" pour les tâches
2. Copier-coller avec Ctrl+C / Ctrl+V pour dupliquer
3. Styliser chaque élément :

• Background : couleur légèrement plus claire
• Padding : token "s"
• Border-radius : token "s"

6. Bouton d'ajout d'élément

Méthode avec composant wrapper

1. Créer un "Custom text" avec "+ Ajouter une carte"
2. Clic droit → "Wrap a component" pour l'entourer d'un bloc
3. Retirer le "+" du texte
4. Ajouter un icon via UI Library :

• Sélectionner l'icône "plus"
• Font-size : XL pour l'agrandir

5. Aligner avec :

• Display : flex
• Align-items : center

Ajouter l'effet hover

1. Sélectionner l'élément
2. Cliquer sur le bouton "Hover" dans les styles
3. Modifier le background avec une couleur plus claire
4. Ajouter cursor : pointer

7. Duplication et finalisation

Créer plusieurs cartes

• Sélectionner une carte complète
• Copier avec Ctrl+C
• Coller avec Ctrl+V dans "Content"
• Modifier les textes ("En cours", "Terminé", etc.)

Bouton global d'ajout

1. Utiliser UI Library → Forms → Button
2. Personnaliser le style selon la charte graphique
3. Texte : "Ajouter une liste"

Conseils pratiques

• Toujours nommer ses blocs et composants
• Utiliser les tokens de la palette pour la cohérence
• Copier-coller les éléments stylisés pour gagner du temps
• Utiliser Display flex et Gap pour les alignements
• Ajouter des effets hover pour l'interactivité
• La UI Library propose des composants pré-faits

Dans le prochain épisode : factorisation du code pour éviter la répétition et améliorer la lisibilité.