⬜ CSS

Le bloc CSS permet d'injecter du code de style (Cascading Style Sheets) pour personnaliser l'apparence des éléments d'une application, offrant des possibilités avancées comme les arrondis, ombres ou animations complexes.

Ce bloc est particulièrement utile pour les utilisateurs souhaitant dépasser les limites des styles prédéfinis dans Célestory et appliquer des modifications visuelles précises.

📥 Entrées

• in (Trigger) : Déclenche l'application du code CSS.
• style (Texte) : Contient le code CSS à exécuter. Un mini-éditeur intégré facilite la saisie.
• clear (Booléen) : Si activé (Vrai), efface les styles CSS précédemment injectés avant d'appliquer le nouveau code (désactivé par défaut).

📤 Sorties

• out (Trigger) : S'active immédiatement après l'injection ou l'effacement du style CSS, permettant de poursuivre le flux.

💡 Exemple d'utilisation

Scénario : Personnalisation d'un bouton avec une animation

1. L'utilisateur souhaite modifier l'apparence d'un bouton dans son application pour le rendre plus dynamique.
2. Il place le bloc CSS dans son graphe, après l'affichage du bouton concerné.
3. Dans l'entrée style, il écrit le code suivant :

   .mon-bouton {
     background-color: #4CAF50;
     border-radius: 12px;
     transition: transform 0.3s;
   }
   .mon-bouton:hover {
     transform: scale(1.1);
   }

4. Le bloc applique immédiatement le style au bouton, qui devient vert avec des coins arrondis et s'anime au survol.
5. Le flux continue vers l'étape suivante, où l'utilisateur peut tester l'interaction avec le bouton.

⚙️ Détails Techniques

• Gestion des styles : Le code CSS est injecté dans le DOM de la vue web et reste actif jusqu'à ce qu'un autre bloc CSS avec clear activé soit exécuté.
• Ciblage des éléments : Les sélecteurs CSS doivent correspondre aux classes ou IDs des éléments générés par Célestory (ex: .celestory-button).
• Limitation : Les styles appliqués peuvent être écrasés par des règles CSS plus spécifiques ou ultérieures dans le flux.

Mis à jour le : 04/03/2026