Éditeur de sections — Vue d'ensemble
L'éditeur de sections Artemis est l'espace où vous composez l'interface d'une application Nexus (éditeur AppFlow). Chaque bloc visuel est une section Artemis. Quand une section est sélectionnée, le panneau de configuration (à droite) expose les propriétés de style et de comportement.
Cette page explique le processus de configuration. Les captures d'écran détaillées de chaque groupe de propriétés sont dans les pages liées.
Processus de configuration d'une section
Sélectionner la section sur le canevas
↓
Choisir l'état à éditer (défaut, survol, désactivé, …)
↓
Régler les couleurs de rôle (Primary, Surface, …)
↓
Définir fond, dimensions, bordure, padding, margin
↓
Ajouter une animation si besoin
↓
Prévisualiser sur desktop et mobile
- Cliquez sur la section à modifier dans le canevas.
- Vérifiez l'état actif dans le sélecteur d'états. Les styles que vous changez s'appliquent à cet état uniquement.
- Parcourez les groupes du panneau dans l'ordre logique : couleurs → fond → dimensions → bordure → espacements → animation.
- Prévisualisez le résultat. Les largeurs desktop et mobile peuvent différer (padding, margin, dimensions).
Groupes du panneau
Couleurs
Les noms de couleurs suivent les rôles Material 3 (Primary, On Primary, Surface, Error, etc.). Ce n'est pas une palette libre : chaque rôle a un usage (texte sur fond, accent, erreur). Objectif : respecter les contrastes WCAG AA/AAA.
Guide complet : Couleurs
Fond
Le fond d'une section peut être une couleur unie, une image ou un dégradé. Combinez-le avec les rôles de couleur pour garder un contraste lisible.
Guide complet : Fond
Dimensions
Largeur, hauteur et contraintes (min/max). Utile pour caler une section dans une grille ou forcer une taille sur mobile.
Guide complet : Dimensions
Bordure
Épaisseur, style, couleur et rayon. Les coins arrondis se règlent par côté ou globalement.
Guide complet : Bordure
Padding et margin
- Padding : espace intérieur entre le contenu et le bord de la section.
- Margin : espace extérieur entre la section et ses voisines.
Les deux se règlent par côté (haut, droite, bas, gauche) et peuvent différer entre desktop et mobile.
Animation
Animations d'entrée, d'attention ou de sortie. Réglez le type, la durée et le délai. Évitez d'empiler trop d'animations sur un même écran (lisibilité, performance, accessibilité).
Guide complet : Animation
États
Une même section peut avoir plusieurs états (défaut, survol, focus, désactivé, etc.). Le sélecteur d'états indique lequel vous éditez. Dupliquez un état de base puis n'en changez que les propriétés qui diffèrent (couleur, élévation).
Guide complet : États
Bonnes pratiques
- Partir des rôles de couleur, pas de codes hexadécimaux isolés, pour rester cohérent et accessible.
- Tester desktop et mobile : padding/margin/dimensions ont des valeurs séparées.
- Limiter les animations aux transitions utiles (apparition d'un panneau, confirmation).
- Nommer clairement les sections dans l'arbre pour retrouver un style plus tard.
Suite du parcours AppFlow
- Créer un modèle personnalisé si l'écran affiche des données métier
- Ajouter des attributs
- Relier les champs de formulaire aux attributs du modèle
- Styliser les sections avec ce panneau