DialogBuilder

🔰 Introduction

Le composant DialogBuilder est une interface de dialogue interactive permettant de personnaliser visuellement l'apparence et le comportement des éléments d’un site web (sections, containers, composants, etc.).

Conçu pour être intuitif et accessible, il permet de modifier les propriétés CSS sans écrire une seule ligne de code.

🧩 Structure de l’Interface

🔍 Vue d’ensemble

L’interface DialogBuilder se présente sous la forme d’une fenêtre modale comprenant :

  • Un titre indiquant le composant en cours d’édition

  • Un bouton de fermeture

  • Un système d’onglets pour accéder aux différentes catégories de personnalisation

  • Une zone de contenu qui change selon l’onglet actif

  • Un sélecteur de breakpoints pour la personnalisation responsive

🗂️ Système d’onglets

Chaque onglet est représenté par une icône explicite, facilitant la navigation :

Icône
Nom
Description

⚙️

Config

Paramètres généraux

↔️

Alignment

Alignement horizontal / vertical

🖼️

Background

Arrière-plan : couleur, image, dégradé

𝐀

Typography

Police, style, espacement

𝗛

Heading

Styles de titres (H1 à H6)

⧉

Border

Bordures : style, couleur, rayon

📏

Spacing

Marges et rembourrages

📐

Breakpoint

Comportement responsive

🚀 Fonctionnalités Clés

1️⃣ Personnalisation Responsive (Breakpoints)

Un sélecteur de points de rupture permet de cibler les résolutions suivantes :

  • Global — toutes tailles d’écran

  • Small — 576px (smartphones)

  • Medium — 768px (tablettes portrait)

  • Large — 992px (tablettes paysage / petits laptops)

  • XL — 1200px (ordinateurs classiques)

  • XXL — 1400px (grands écrans)

2️⃣ Modification en Temps Réel

Les changements sont immédiatement visibles sur le composant sélectionné. Cela permet un design par itération rapide, sans rechargement.

3️⃣ Gestion des Composants

Le DialogBuilder permet de :

  • Modifier un composant existant

  • Mettre à jour l’en-tête et le pied de page

  • Personnaliser les éléments partagés entre plusieurs pages

↔️ Alignment

Contrôle de l’alignement interne :

  • Alignement horizontal : gauche / centre / droite

  • Alignement vertical : haut / centre / bas

  • Distribution : espace entre / autour

🖼️ Background

Personnalisation de l’arrière-plan :

  • Couleur de fond

  • Image (URL ou upload)

  • Dégradé linéaire / radial

𝐀 Typography

Gestion de la typographie :

  • Police et taille

  • Style : gras / italique / souligné

  • Couleur du texte

  • Espacement des lettres

𝗛 Heading

Spécifique aux titres (H1 à H6) :

  • Taille et graisse

  • Alignement

  • Espacement vertical

⧉ Border

Définition de la bordure :

  • Style : pleine, pointillée, double...

  • Largeur

  • Couleur

  • Rayon des coins

📏 Spacing

Contrôle de l’espacement :

  • margin (extérieur)

  • padding (intérieur)

  • Espacement inter-éléments

📐 Breakpoint

Configuration responsive :

  • Visibilité conditionnelle

  • Redimensionnement adaptatif

  • Règles spécifiques par écran

🔄 Interactions Système

🔁 Processus de Mise à Jour

À chaque modification :

  1. Les changements sont collectés

  2. Une requête API est déclenchée

  3. Le composant est mis à jour dynamiquement

  4. L’interface se synchronise avec le nouvel état

✅ Composants supportés

  • Composants standards de la page

  • En-têtes / pieds de page

  • Widgets globaux ou partagés

📚 Cas d'Utilisation

🎯 Modifier un bouton

  1. Sélectionner le bouton

  2. Ouvrir DialogBuilder

  3. Onglet Background → changer la couleur

  4. Onglet Border → arrondir les coins

  5. Onglet Typography → modifier le texte

  6. Onglet Spacing → ajouter du padding

📱 Adapter un composant pour mobile

  1. Sélectionner le composant

  2. Choisir le breakpoint Small (576px)

  3. Modifier taille, alignement, espacement

  4. Tester le comportement en redimensionnant la fenêtre

🧩 Personnaliser un en-tête

  1. Sélectionner l’en-tête global

  2. Ouvrir DialogBuilder

  3. Modifier l’apparence via les onglets

  4. Les modifications seront automatiquement répercutées sur toutes les pages

✅ Conclusion

Le DialogBuilder est un outil puissant, flexible et no-code, idéal pour les développeurs comme les non-techniciens.

Il facilite la création de mises en page responsives, cohérentes et élégantes, tout en réduisant considérablement le temps de développement.

PrécédentModèle de page

Dernière mise à jour