# Créer sa première page

**Résumé express :** Utiliser les widgets de l'interface library et créer des propriétés réactives pour des composants dynamiques.

---
## Introduction aux Widgets

Au lieu d'utiliser une div de base, nous allons découvrir les **widgets** qui permettent d'utiliser les éléments de l'interface library de Luna Park (appelée Ferris Wheel en interne).

## 1. Widget Card de base

### Création et utilisation
1. Créer un nouveau composant
2. Utiliser **Widget** au lieu de div
3. Par défaut : widget **Card**
4. Ajouter du texte : "Hello World"
5. Un arrière-plan stylisé apparaît automatiquement

### Propriétés de la Card

**Depth (profondeur) :**
- `-1` : même arrière-plan que le preview (moins visible)
- `0` : valeur par défaut
- `1` : plus clair
- Utile pour imbriquer des cartes avec différents niveaux

**Type :**
- **Default** : style par défaut
- **Primary** : couleur bleue
- **Outline** : bordure seule
- **Transparent** : complètement transparent

## 2. Widget Alert

### Configuration
1. Sélectionner **Widget** → **Alert**
2. Nouvelles propriétés spécifiques :
    - **Status** : success, warning, error, etc.
    - **Icon** : icône automatique selon le status

### Personnalisation d'icônes
1. Cliquer sur le champ icône
2. Recherche automatique d'icônes disponibles
3. Exemple : taper "plane" pour icône d'avion

## 3. Widget Text Animation

### Fonctionnalités
1. **Widget** → **Text Animation**
2. Pas d'enfants visibles : contenu défini dans les propriétés
3. Propriété **content** : "Hello from Luna Park"
4. Animation se déclenche à chaque apparition de l'élément

### Test d'animation
Basculer entre **Builder** et **Preview** pour voir l'animation se répéter.

## 4. Créer des propriétés personnalisées

### Problème : contenu statique
Comment changer le contenu du widget depuis un autre composant ?

### Solution : propriétés réactives
1. Dans le composant, ajouter une **Property**
2. **Nom** : "text"
3. **Type** : String
4. **Valeur par défaut** : "Hello World"

### Types de propriétés disponibles
- **String** : chaînes de caractères (texte)
- **Number** : nombres
- **Boolean** : valeurs true/false
- Autres types abordés plus tard

## 5. Utiliser les propriétés réactives

### Mode constant vs réactif
**Icône égal (=) :** valeur constante définie directement
**Icône éclair (⚡) :** propriété réactive qui détecte automatiquement les propriétés disponibles

### Application au Text Animation
1. Propriété **content** du widget
2. Cliquer sur l'éclair
3. Sélectionner la propriété "text" créée
4. Le contenu devient dynamique

## 6. Affichage de propriétés dans le texte

### Avec Custom Text
1. Ajouter un **Custom Text** : "Le contenu de ma propriété est :"
2. Créer une variable temporaire entre accolades : `{display}`
3. Une propriété "display" apparaît dans l'inspecteur
4. Mode éclair → sélectionner "text"
5. Affichage : "Le contenu de ma propriété est : Hello World"

### Avec variables directes
Utiliser directement la variable dans le texte pour afficher la valeur.

## 7. Utilisation dans une page

### Instancier le composant
1. Créer une nouvelle **Page** : "My Page"
2. Ajouter le composant créé
3. La propriété "text" apparaît dans l'inspecteur

### Personnalisation par instance
1. Modifier la valeur : "Hello from Luna Park"
2. Le changement s'applique automatiquement à toutes les utilisations de cette propriété
3. Chaque instance peut avoir sa propre valeur

## Avantages des widgets

### Interface prête à l'emploi
- Composants stylisés par défaut
- Cohérence visuelle automatique
- Évite de recréer des éléments communs

### Gain de temps
- Pas besoin de styler depuis zéro
- Propriétés pré-configurées
- Animations et interactions intégrées

### Flexibilité
- Personnalisation via propriétés
- Adaptation au design souhaité
- Combinaison possible avec éléments custom

## Concepts clés

### Propriétés réactives
- **Liaison dynamique** entre composants
- **Mise à jour automatique** des valeurs
- **Réutilisabilité** avec différents contenus

### Widgets vs éléments de base
- **Widgets** : fonctionnalités avancées intégrées
- **Div/Custom Text** : contrôle total mais plus de travail
- **Hybride** : combiner les deux approches

### Types de données
- **String** : tout texte ou chaîne de caractères
- **Number** : valeurs numériques
- **Boolean** : états vrai/faux

---