# 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

---