Widget Tabs

Le widget Tabs vous permet d'organiser le contenu en plusieurs sections à onglets, offrant une façon intuitive d'afficher des informations connexes dans une interface compacte.

Aperçu​

Le widget Tabs crée une interface à onglets interactive où les utilisateurs peuvent basculer entre différentes sections de contenu. Chaque onglet peut contenir n'importe quelle combinaison d'autres widgets et prend en charge la visibilité dynamique, les règles de validation et le style personnalisé.

Configuration de Base​

Paramètres Globaux​

Nom

• Description : Nom d'affichage du widget
• Utilisation : Utilisé pour l'identification dans le constructeur d'interface

Variable/Modèle

• Description : Le chemin du modèle de données qui stocke l'ID de l'onglet actif
• Format : Valeur de chaîne représentant l'onglet actuellement sélectionné
• Exemple : selectedTab

Gestion des Onglets​

Configuration des Noms d'Onglets​

Chaque onglet du widget peut être configuré avec les propriétés suivantes :

Titre

• Description : Le texte d'affichage affiché sur l'en-tête de l'onglet
• Type : Chaîne de caractères
• Prend en Charge : Texte statique et variables dynamiques
• Exemple : "Informations Utilisateur", "Paramètres"

ID

• Description : Identifiant unique pour l'onglet
• Type : Chaîne de caractères
• Utilisation : Utilisé en interne pour suivre l'onglet actif et pour l'accès programmatique
• Exemple : "user_info", "settings"

Règles de Visibilité

• Description : Conditions JavaScript pour contrôler quand chaque onglet est visible
• Format : Expression booléenne ou code JavaScript
• Accès : Disponible via le bouton d'édition (icône d'œil) à côté de chaque onglet

Ajout et Gestion des Onglets​

1. Les onglets sont affichés dans une liste déplaçable dans le panneau de configuration
2. Utilisez la poignée de glissement (icône de barres) pour réorganiser les onglets
3. Chaque ligne d'onglet affiche :
   • Poignée de glissement pour réorganiser
   • Champ de saisie du titre
   • Champ de saisie de l'ID
   • Bouton d'édition pour les règles de visibilité avancées

Configuration du Contenu​

Chaque onglet peut contenir tous les widgets disponibles sur la plateforme. Le contenu est géré via la structure d'arbre de widgets principale où chaque onglet agit comme un conteneur pour ses widgets enfants.

Validation d'Écran​

Le widget tabs prend en charge une validation complète sur différents écrans :

Options de Validation​

Disponible

• Description : Contrôle si le widget existe sur des écrans spécifiques
• Type : Interrupteur booléen
• Par défaut : true

Visible

• Description : Contrôle la visibilité du widget avec prise en charge des conditions avancées
• Options :
  • Simple : Interrupteur booléen
  • Avancé : Expressions JavaScript utilisant des variables d'interface
• Syntaxe : Utilisez {{variableName}} pour référencer d'autres variables d'interface
• Exemple : {{userRole}} === 'admin'

Requis

• Description : Rend le widget obligatoire (s'applique aux éléments de formulaire enfants)
• Type : Booléen ou expression conditionnelle
• Note : Hérite à tous les éléments de formulaire dans les onglets

Désactiver/Réduire

• Description : Contrôle si le widget est désactivé ou réduit
• Type : Interrupteur booléen ou expression conditionnelle

Conditions Avancées​

Cliquez sur "Advanced Setting" pour utiliser des expressions JavaScript pour un comportement dynamique :

• Référencer toute variable d'interface en utilisant la syntaxe {{variableName}}
• Prise en charge des opérations logiques complexes
• Peut être appliqué à des écrans individuels ou à tous les écrans à la fois

Style et Apparence​

Options de Mise en Page​

Noms de Classe

• Description : Appliquer des classes CSS personnalisées au conteneur d'onglets
• Format : Noms de classe séparés par des espaces
• Exemple : custom-tabs highlighted

Classes Dynamiques

• Description : Appliquer des classes en fonction de l'état de l'interface
• Accès : Cliquer sur l'icône de pinceau à côté du champ Class
• Format : Expressions JavaScript renvoyant des noms de classe
• Syntaxe : Référencer les variables avec {{variableName}}

Style Intégré​

Le widget applique automatiquement :

• Style d'onglets Element UI (el-tabs)
• Comportement réactif pour différentes tailles d'écran
• Classes de visibilité personnalisées (sf_tabs_visibility)

Fonctionnalités d'Intégration​

Intégration de Formulaire​

Lorsque les onglets contiennent des éléments de formulaire :

• Les règles de validation se propagent aux éléments enfants
• La soumission du formulaire inclut les données de tous les onglets
• La validation requise s'applique au-delà des limites des onglets

Liaison de Variable​

• La variable de modèle du widget stocke l'ID de l'onglet actuellement actif
• Les modifications déclenchent des mises à jour réactives dans toute l'interface
• Peut être utilisé dans les conditions pour d'autres widgets

Meilleures Pratiques​

Organisation des Onglets​

1. Regroupement Logique : Regrouper le contenu connexe
2. Nommage Clair : Utiliser des titres d'onglet descriptifs
3. IDs Cohérents : Suivre une convention de nommage pour les IDs d'onglet

Considérations de Performance​

1. Chargement du Contenu : Considérer le chargement paresseux pour les onglets avec du contenu lourd
2. Validation : Utiliser la validation spécifique aux onglets lorsque c'est possible
3. Design Réactif : Tester le comportement des onglets sur différentes tailles d'écran

Expérience Utilisateur​

1. Nombre d'Onglets : Limiter à 5-7 onglets pour une utilisabilité optimale
2. Sélection par Défaut : Définir un onglet actif par défaut approprié
3. Indication de Progression : Utiliser les états de validation pour montrer la complétion

Dépannage​

Problèmes Courants​

L'Onglet ne Bascule pas

• Vérifier que la variable de modèle est correctement liée
• Vérifier la configuration de l'événement onClick
• S'assurer qu'il n'y a pas d'erreurs JavaScript dans les gestionnaires personnalisés

Le Contenu ne s'Affiche pas

• Vérifier que les widgets enfants sont correctement configurés
• Vérifier les règles de validation sur le contenu de l'onglet
• Confirmer les paramètres de disponibilité spécifiques à l'écran

Problèmes de Style

• Vérifier les conflits de classe CSS
• Vérifier les paramètres de comportement réactif
• Tester sur différentes tailles d'écran

Conseils de Débogage​

1. Journalisation Console : Ajouter des instructions console.log dans les gestionnaires onClick
2. Inspection de Variable : Surveiller la variable de modèle dans les outils de développement du navigateur
3. Test de Validation : Tester tous les scénarios de validation sur tous les écrans
4. Test Réactif : Utiliser les outils de développement du navigateur pour simuler différents appareils

Configuration Avancée​

Création Dynamique d'Onglets​

Pour les cas d'utilisation avancés, les onglets peuvent être générés dynamiquement en fonction de tableaux de données en utilisant la fonctionnalité de boucle de l'interface.

Intégration avec d'Autres Widgets​

Les onglets peuvent contenir tous les autres widgets, notamment :

• Grilles et formulaires
• Tables de données
• Graphiques et médias
• Autres widgets conteneurs

Gestion Personnalisée des Événements​

Les utilisateurs avancés peuvent implémenter une logique de basculement d'onglets personnalisée via le système d'action et des fonctions JavaScript personnalisées.