Créer votre première page

Pages
Components
Construisez votre première page avec des composants de base et découvrez la logique visuelle.
Tour des fonctionnalités (Épisode 3)
Retour à l'Académie

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