Documentation
Version de développement
Cette documentation décrit la version « next » (develop), non encore publiée. Pour la version stable, basculez sur « v5 » dans l'en-tête.
Interface

Utiliser les composants Skeleton et Divider

Intégrez des indicateurs de chargement et des séparateurs visuels dans vos interfaces Dokos pour améliorer l'expérience utilisateur.

Utiliser les composants Skeleton et Divider

Dans Dokos, les composants Skeleton et Divider permettent d'améliorer l'expérience utilisateur en ajoutant des indicateurs visuels de chargement et des séparateurs dans les interfaces. Ces éléments sont particulièrement utiles pour les tableaux de bord, les formulaires et les listes où une structure claire et une rétroaction visuelle sont nécessaires.

Composant Skeleton

Le composant Skeleton est utilisé pour afficher un placeholder pendant le chargement des données. Il simule la structure du contenu final, réduisant ainsi la perception du temps de chargement pour l'utilisateur.

Cas d'utilisation

  • Tableaux de bord : Afficher des placeholders pour les graphiques ou les cartes en cours de chargement.
  • Listes et tableaux : Indiquer que les données sont en cours de récupération.
  • Formulaires : Prévisualiser la structure d'un formulaire avant que les données ne soient chargées.

Exemple d'intégration

Pour intégrer un composant Skeleton dans une page Dokos, utilisez le code suivant dans un script JavaScript personnalisé :

// Exemple d'utilisation dans un tableau de bord
frappe.ui.make_app_page({
    title: 'Tableau de bord Client',
    parent: cur_page,
    single_column: true
});

// Ajouter un skeleton pendant le chargement des données
const skeleton = frappe.ui.add_skeleton({
    parent: $('.layout-main-section'),
    count: 3, // Nombre de placeholders
    type: 'card' // Type de skeleton (card, list, form)
});

// Simuler un chargement de données
setTimeout(() => {
    skeleton.remove(); // Supprimer le skeleton une fois les données chargées
    $('.layout-main-section').append('<div class=\"alert alert-success\">Données chargées avec succès !</div>');
}, 2000);

Personnalisation

Vous pouvez personnaliser l'apparence des skeletons en modifiant les classes CSS associées. Voici un exemple de personnalisation :

/* Personnalisation du skeleton */
.skeleton {
    background-color: #f0f0f0;
    border-radius: 4px;
    margin-bottom: 10px;
}

.skeleton.shine {
    animation: shine 1.5s infinite;
}

@keyframes shine {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

Composant Divider

Le composant Divider est utilisé pour séparer visuellement des sections dans une interface. Il permet de structurer le contenu et d'améliorer la lisibilité.

Cas d'utilisation

  • Formulaires : Séparer les sections logiques (ex : informations client, détails de commande).
  • Listes : Distinguer des groupes d'éléments.
  • Tableaux de bord : Organiser les cartes et les graphiques.

Exemple d'intégration

Pour ajouter un Divider dans une page Dokos, utilisez le code suivant :

// Ajouter un divider dans un formulaire
const divider = frappe.ui.add_divider({
    parent: $('.form-section'),
    text: 'Détails de la commande', // Texte optionnel
    orientation: 'horizontal' // Orientation (horizontal ou vertical)
});

Personnalisation

Vous pouvez personnaliser l'apparence des dividers en modifiant les classes CSS associées :

/* Personnalisation du divider */
.divider {
    border-top: 1px solid #e0e0e0;
    margin: 20px 0;
}

.divider-text {
    color: #666;
    font-weight: bold;
}

Bonnes pratiques

  • Skeleton : Utilisez des skeletons pour les éléments critiques où le temps de chargement peut être perceptible. Évitez de les utiliser pour des contenus statiques.
  • Divider : Utilisez des dividers pour structurer le contenu, mais évitez de surcharger l'interface avec trop de séparateurs.
  • Accessibilité : Assurez-vous que les skeletons et dividers sont accessibles en utilisant des contrastes de couleurs appropriés et des textes alternatifs si nécessaire.

Exemple complet : Tableau de bord avec Skeleton et Divider

Voici un exemple complet d'intégration des deux composants dans un tableau de bord Dokos :

frappe.ui.make_app_page({
    title: 'Tableau de bord Fournisseur',
    parent: cur_page,
    single_column: true
});

// Ajouter un skeleton pendant le chargement
const skeleton = frappe.ui.add_skeleton({
    parent: $('.layout-main-section'),
    count: 2,
    type: 'card'
});

// Simuler un chargement de données
setTimeout(() => {
    skeleton.remove();
    
    // Ajouter un divider pour séparer les sections
    frappe.ui.add_divider({
        parent: $('.layout-main-section'),
        text: 'Statistiques du fournisseur',
        orientation: 'horizontal'
    });
    
    // Ajouter du contenu
    $('.layout-main-section').append(
        '<div class=\"card\">' +
        '   <div class=\"card-body\">' +
        '       <h5>Commandes en cours</h5>' +
        '       <p>12 commandes en attente de livraison.</p>' +
        '   </div>' +
        '</div>'
    );
    
    frappe.ui.add_divider({
        parent: $('.layout-main-section'),
        text: 'Dernières activités',
        orientation: 'horizontal'
    });
    
    $('.layout-main-section').append(
        '<div class=\"card\">' +
        '   <div class=\"card-body\">' +
        '       <ul>' +
        '           <li>Nouvelle commande reçue de <strong>Maison Verte SARL</strong></li>' +
        '           <li>Facture payée par <strong>Bureau Moderne</strong></li>' +
        '       </ul>' +
        '   </div>' +
        '</div>'
    );
}, 2000);

Conclusion

Les composants Skeleton et Divider sont des outils puissants pour améliorer l'expérience utilisateur dans Dokos. En les intégrant de manière stratégique, vous pouvez rendre vos interfaces plus intuitives et agréables à utiliser.

Pour aller plus loin, consultez la documentation officielle de Frappe UI pour découvrir d'autres composants et fonctionnalités.