Interface et navigation

Interface
Navigation
Apprenez à naviguer dans l'interface de Luna Park et comprenez les différents panneaux.
Tour des fonctionnalités (Épisode 2)
Retour à l'Académie

Interface et navigation

Résumé express : Apprendre à créer des composants réutilisables avec styling, slots et propriétés personnalisables.

Introduction

Ce tutoriel présente la création de composants dans Luna Park. Un composant est un élément visuel réutilisable qu'on peut placer n'importe où dans l'application.

1. Préparation du projet

Nettoyer l'espace de travail

  1. Supprimer les fichiers existants : clic droit → Delete
  2. Créer un nouveau composant : clic droit → New → Component

2. Élément de base : la div

Concept fondamental

  • La div est l'élément de base (comme une brique)
  • Par défaut : largeur et hauteur = 0 (invisible)
  • Nécessite des propriétés de taille pour être visible

Créer plusieurs divs

  1. Cliquer sur le + pour ajouter des éléments
  2. Chaque nouvel élément est une div par défaut

3. Stylisation des éléments

Ajouter des dimensions

  1. Sélectionner une div
  2. Inspector → onglet Style → +
  3. Choisir catégorie Size
  4. Définir min-width et min-height (ex: 57px)

Ajouter de la couleur

  1. Catégorie Background → Color
  2. Choisir une couleur (ex: rouge)
  3. Astuce : icône œil pour masquer les propriétés non utilisées

Comportement par défaut

  • Les divs prennent toute la largeur disponible
  • Héritage automatique des tailles entre éléments similaires

4. Gestion de l'affichage avec Flexbox

Problème : disposition verticale par défaut

Solution : utiliser display: flex sur l'élément parent

Configuration Flex

  1. Sélectionner l'élément parent (conteneur)
  2. Ajouter propriété Display → Flex
  3. Options disponibles :
    • Direction : horizontal/vertical
    • Align items : alignement perpendiculaire
    • Justify content : alignement principal
    • Gap : espacement entre éléments

Exemples d'alignement

  • Left/Right : alignement horizontal
  • Center : centrage
  • Stretch : étirement pour taille uniforme

5. Création d'un composant bouton

Structure de base

  1. Partir d'une div simple
  2. Nettoyer les styles précédents
  3. Définir taille fixe : min-width et height

Ajouter du texte

  1. + → Custom Text
  2. Taper le texte souhaité
  3. Markdown supporté (ex: **gras** avec étoiles)

Stylisation du bouton

Background :

  • Couleur : bleu foncé

Centrage du texte :

  • Display : flex
  • Align items : center
  • Justify content : center

Espacement :

  • Padding : espace intérieur
  • Margin : espace extérieur

Bordures :

  • Border → couleur, style (solid/dotted), taille (2px)
  • Border radius : coins arrondis

6. Utilisation de composants

Créer une page

  1. Nouveau composant avec Type : Page
  2. Une page est accessible directement dans l'application
  3. Affichage navigateur automatique

Renommage pour organisation

  • Composant bouton : "color-blocks"
  • Page : "my-page"

Instancier le composant

  1. + → icône de changement de type
  2. Component → sélectionner "color-blocks"
  3. Le composant apparaît avec ses styles

Réutilisabilité

  • Dupliquer avec + et sélection du même composant
  • Modifier le composant original met à jour toutes ses instances

7. Slots pour contenu dynamique

Problème : contenu identique

Tous les boutons affichent le même texte.

Solution : Slot par défaut

  1. + → Slot
  2. Texte en pointillés = zone d'insertion
  3. Contenu par défaut : texte affiché si rien n'est inséré

Utilisation des slots

  1. Dans la page, ajouter du contenu aux composants
  2. + → Custom Text dans le composant
  3. Le texte remplace le contenu par défaut du slot

Slots nommés

Cas d'usage : plusieurs zones de contenu (ex: icône + texte)

  1. Premier slot : nom = "emoji"
  2. Second slot : par défaut (sans nom)
  3. Ajouter gap pour espacement
  4. Chaque slot peut recevoir un contenu différent

Comportement des slots multiples

  • Slots identiques : contenu dupliqué et synchronisé
  • Slots nommés : contenu indépendant
  • Modification d'un slot par défaut affecte toutes ses instances

Concepts CSS intégrés

Display modes

  • Block : largeur complète par défaut
  • Inline : largeur du contenu
  • Flex : contrôle de disposition avancé

Spacing

  • Padding : espace intérieur (affecte la taille apparente)
  • Margin : espace extérieur (n'affecte pas la taille de l'élément)

Flexbox

  • Direction : row (horizontal) / column (vertical)
  • Justify : alignement axe principal
  • Align : alignement axe secondaire
  • Gap : espacement uniforme entre enfants

Avantages des composants

  • Réutilisabilité : un composant, plusieurs instances
  • Maintenance : modification centralisée
  • Consistance : design uniforme
  • Flexibilité : slots pour personnalisation