Title_DevPanel_Interface
Le Dev panel est accessible en cliquant sur l'icone 👁 en haut à droite de votre fenêtre. Une fois ouvert il présente tous les outils nécessaire à la création de vos page d'application.
Barre d'outils
Maintient le Dev Panel ouvert en permanence. Sans épinglage, le panel se rétracte automatiquement et ne s'affiche qu'au survol de cette icône.
Définit le mode d'affichage du Dev Panel.
Déverrouillé : le panel s'affiche en overlay au-dessus de la page.
Verrouillé : le panel réserve un espace dédié et la page se redimensionne à côté.
Active un mode de débogage visuel qui dessine des bordures en pointillés autour de tous les éléments de la page, y compris les conteneurs vides normalement invisibles.
Utile pour identifier la structure DOM.
Active/désactive l'affichage forcé de tous les éléments conditionnels.
Activé : les blocs normalement masqués deviennent visibles avec un arrière-plan hachuré pour les distinguer des éléments toujours affichés.
Redirige vers l'interface d'administration globale de l'application pour la gestion des projets, utilisateurs et paramètres système.
Annule ou rétablit les dernières modifications de structure et de contenu (ajout/suppression d'éléments, déplacements, changements de propriétés).
Sélecteur de breakpoints responsive
Le responsive design permet d'adapter l'affichage d'un site web selon la taille d'écran de l'appareil utilisé. Les breakpoints définissent les seuils de largeur où la mise en page doit s'adapter (smartphone, tablette, desktop)
Default : Paramètres par défaut appliqués à toutes les tailles d'écran sans spécification
XS : Extra Small - Écrans très petits (0px et plus)
SM : Small - Écrans petits (à partir de 640px)
MD : Medium - Écrans moyens (à partir de 768px)
LG : Large - Écrans larges (à partir de 1024px)
XL : Extra Large - Écrans très larges (à partir de 1280px)
2XL : 2X Large - Écrans ultra-larges (à partir de 1536px)
Fonctionnement :
Le breakpoint sélectionné remplit deux fonctions :
- Prévisualisation adaptative : La zone de rendu WYSIWYG ajuste automatiquement sa largeur à celle du breakpoint sélectionné pour afficher le rendu final tel qu'il apparaîtra sur les appareils correspondants.
- Contexte d'édition : Tous les paramètres de style modifiés (padding, margin, taille, etc.) sont enregistrés spécifiquement pour ce breakpoint. Les règles CSS suivent une logique responsive où chaque breakpoint hérite des paramètres des tailles inférieures, sauf si surchargés.
Exemple : En sélectionnant "SM", l'aperçu se redimensionne à la largeur des petits écrans. Un padding de 10px défini sur un conteneur s'appliquera aux écrans SM et plus larges (MD, LG, XL, 2XL), sauf si ces breakpoints ont leurs propres valeurs définies.
ℹ️ Info : Lorsque des paramètres de style sont définis sur un breakpoint spécifique, l'icône correspondante sera soulignée pour indiquer qu'il contient des styles personnalisés.