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.

Composants UI

Utiliser les composants Skeleton et Divider

Afficher un bloc d'attente pendant un chargement avec frappe.ui.skeleton, et une ligne de séparation avec un bouton facultatif avec frappe.ui.divider.

Utiliser les composants Skeleton et Divider

frappe.ui.skeleton et frappe.ui.divider sont deux composants Espresso du desk. Chacun existe sous forme d'élément jQuery et sous forme de chaîne HTML (.html(opts)).

Skeleton : bloc d'attente

Un skeleton est un bloc gris qui pulse. Il occupe la place d'un contenu en cours de chargement.

const $zone = $(page.body).find(".resume-client");
$zone.empty().append(
    frappe.ui.skeleton({ width: "60%", height: "20px" }),
    frappe.ui.skeleton({ width: "40%", height: "14px", css_class: "mt-2" })
);

frappe.db.get_value("Customer", "Maison Verte", "customer_group").then(({ message }) => {
    $zone.empty().text(message.customer_group);
});

Exemple fictif : le client « Maison Verte » est inventé.

Option	Rôle
`width`, `height`	Taille, en longueur CSS seule : `120px`, `60%`, `1.5rem`. Une autre valeur est ignorée et un avertissement s'affiche dans la console.
`css_class`	Classes en plus, par exemple `rounded-full` pour un avatar.
`attrs`	Attributs HTML en plus.

Le bloc porte aria-hidden="true" : les lecteurs d'écran l'ignorent. La couleur suit le mode sombre. Si l'utilisateur a choisi de réduire les animations dans son système, le bloc ne pulse pas.

Dans du HTML construit en chaîne :

const html = `<div class="flex gap-2">${frappe.ui.skeleton.html({ width: "32px", height: "32px", css_class: "rounded-full" })}</div>`;

Divider : ligne de séparation

$(page.body).append(frappe.ui.divider());

Option	Défaut	Rôle
`orientation`	`horizontal`	`horizontal` ou `vertical`.
`flex_item`	—	Pour une ligne verticale dans une rangée flex : la ligne prend la hauteur de la rangée.
`action`	—	Bouton sur la ligne (horizontale seulement) : `{ label, onclick, loading }`.
`position`	`center`	Place du bouton sur la ligne : `start`, `center` ou `end`.
`css_class`, `attrs`	—	Classes et attributs HTML en plus.

Ligne avec un bouton « Charger plus »

const $divider = frappe.ui.divider({
    action: {
        label: __("Load More"),
        onclick: () => charger_page_suivante(),
    },
});
$(page.body).find(".liste").after($divider);

Si onclick renvoie une promesse, le bouton affiche un indicateur de chargement jusqu'à sa fin. Le bouton est un frappe.ui.button de taille sm et de style outline.