[{"data":1,"prerenderedAt":856},["ShallowReactive",2],{"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Futiliser-les-composants-skeleton-et-divider":3,"section:\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Futiliser-les-composants-skeleton-et-divider":855},{"id":4,"title":5,"body":6,"description":843,"extension":844,"meta":845,"navigation":258,"path":851,"seo":852,"stem":853,"__hash__":854},"docs\u002F2.next\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Futiliser-les-composants-skeleton-et-divider.md","Utiliser les composants Skeleton et Divider",{"type":7,"value":8,"toc":837},"minimark",[9,13,35,40,43,368,371,438,445,448,539,543,580,679,684,813,833],[10,11,5],"h1",{"id":12},"utiliser-les-composants-skeleton-et-divider",[14,15,16,20,21,24,25,30,31,34],"p",{},[17,18,19],"code",{},"frappe.ui.skeleton"," et ",[17,22,23],{},"frappe.ui.divider"," sont deux ",[26,27,29],"a",{"href":28},"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fcomposants-ui-espresso","composants Espresso"," du desk. Chacun existe sous forme d'élément jQuery et sous forme de chaîne HTML (",[17,32,33],{},".html(opts)",").",[36,37,39],"h2",{"id":38},"skeleton-bloc-dattente","Skeleton : bloc d'attente",[14,41,42],{},"Un skeleton est un bloc gris qui pulse. Il occupe la place d'un contenu en cours de chargement.",[44,45,50],"pre",{"className":46,"code":47,"language":48,"meta":49,"style":49},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const $zone = $(page.body).find(\".resume-client\");\n$zone.empty().append(\n    frappe.ui.skeleton({ width: \"60%\", height: \"20px\" }),\n    frappe.ui.skeleton({ width: \"40%\", height: \"14px\", css_class: \"mt-2\" })\n);\n\nfrappe.db.get_value(\"Customer\", \"Maison Verte\", \"customer_group\").then(({ message }) => {\n    $zone.empty().text(message.customer_group);\n});\n","js","",[17,51,52,105,127,186,246,253,260,328,358],{"__ignoreMap":49},[53,54,57,61,65,69,73,76,79,82,84,87,90,93,97,99,102],"span",{"class":55,"line":56},"line",1,[53,58,60],{"class":59},"spNyl","const",[53,62,64],{"class":63},"sTEyZ"," $zone ",[53,66,68],{"class":67},"sMK4o","=",[53,70,72],{"class":71},"s2Zo4"," $",[53,74,75],{"class":63},"(page",[53,77,78],{"class":67},".",[53,80,81],{"class":63},"body)",[53,83,78],{"class":67},[53,85,86],{"class":71},"find",[53,88,89],{"class":63},"(",[53,91,92],{"class":67},"\"",[53,94,96],{"class":95},"sfazB",".resume-client",[53,98,92],{"class":67},[53,100,101],{"class":63},")",[53,103,104],{"class":67},";\n",[53,106,108,111,113,116,119,121,124],{"class":55,"line":107},2,[53,109,110],{"class":63},"$zone",[53,112,78],{"class":67},[53,114,115],{"class":71},"empty",[53,117,118],{"class":63},"()",[53,120,78],{"class":67},[53,122,123],{"class":71},"append",[53,125,126],{"class":63},"(\n",[53,128,130,133,135,138,140,143,145,148,152,155,158,161,163,166,169,171,173,176,178,181,183],{"class":55,"line":129},3,[53,131,132],{"class":63},"    frappe",[53,134,78],{"class":67},[53,136,137],{"class":63},"ui",[53,139,78],{"class":67},[53,141,142],{"class":71},"skeleton",[53,144,89],{"class":63},[53,146,147],{"class":67},"{",[53,149,151],{"class":150},"swJcz"," width",[53,153,154],{"class":67},":",[53,156,157],{"class":67}," \"",[53,159,160],{"class":95},"60%",[53,162,92],{"class":67},[53,164,165],{"class":67},",",[53,167,168],{"class":150}," height",[53,170,154],{"class":67},[53,172,157],{"class":67},[53,174,175],{"class":95},"20px",[53,177,92],{"class":67},[53,179,180],{"class":67}," }",[53,182,101],{"class":63},[53,184,185],{"class":67},",\n",[53,187,189,191,193,195,197,199,201,203,205,207,209,212,214,216,218,220,222,225,227,229,232,234,236,239,241,243],{"class":55,"line":188},4,[53,190,132],{"class":63},[53,192,78],{"class":67},[53,194,137],{"class":63},[53,196,78],{"class":67},[53,198,142],{"class":71},[53,200,89],{"class":63},[53,202,147],{"class":67},[53,204,151],{"class":150},[53,206,154],{"class":67},[53,208,157],{"class":67},[53,210,211],{"class":95},"40%",[53,213,92],{"class":67},[53,215,165],{"class":67},[53,217,168],{"class":150},[53,219,154],{"class":67},[53,221,157],{"class":67},[53,223,224],{"class":95},"14px",[53,226,92],{"class":67},[53,228,165],{"class":67},[53,230,231],{"class":150}," css_class",[53,233,154],{"class":67},[53,235,157],{"class":67},[53,237,238],{"class":95},"mt-2",[53,240,92],{"class":67},[53,242,180],{"class":67},[53,244,245],{"class":63},")\n",[53,247,249,251],{"class":55,"line":248},5,[53,250,101],{"class":63},[53,252,104],{"class":67},[53,254,256],{"class":55,"line":255},6,[53,257,259],{"emptyLinePlaceholder":258},true,"\n",[53,261,263,266,268,271,273,276,278,280,283,285,287,289,292,294,296,298,301,303,305,307,310,312,315,319,322,325],{"class":55,"line":262},7,[53,264,265],{"class":63},"frappe",[53,267,78],{"class":67},[53,269,270],{"class":63},"db",[53,272,78],{"class":67},[53,274,275],{"class":71},"get_value",[53,277,89],{"class":63},[53,279,92],{"class":67},[53,281,282],{"class":95},"Customer",[53,284,92],{"class":67},[53,286,165],{"class":67},[53,288,157],{"class":67},[53,290,291],{"class":95},"Maison Verte",[53,293,92],{"class":67},[53,295,165],{"class":67},[53,297,157],{"class":67},[53,299,300],{"class":95},"customer_group",[53,302,92],{"class":67},[53,304,101],{"class":63},[53,306,78],{"class":67},[53,308,309],{"class":71},"then",[53,311,89],{"class":63},[53,313,314],{"class":67},"({",[53,316,318],{"class":317},"sHdIc"," message",[53,320,321],{"class":67}," })",[53,323,324],{"class":59}," =>",[53,326,327],{"class":67}," {\n",[53,329,331,334,336,338,340,342,345,347,350,352,354,356],{"class":55,"line":330},8,[53,332,333],{"class":63},"    $zone",[53,335,78],{"class":67},[53,337,115],{"class":71},[53,339,118],{"class":150},[53,341,78],{"class":67},[53,343,344],{"class":71},"text",[53,346,89],{"class":150},[53,348,349],{"class":63},"message",[53,351,78],{"class":67},[53,353,300],{"class":63},[53,355,101],{"class":150},[53,357,104],{"class":67},[53,359,361,364,366],{"class":55,"line":360},9,[53,362,363],{"class":67},"}",[53,365,101],{"class":63},[53,367,104],{"class":67},[14,369,370],{},"Exemple fictif : le client « Maison Verte » est inventé.",[372,373,374,387],"table",{},[375,376,377],"thead",{},[378,379,380,384],"tr",{},[381,382,383],"th",{},"Option",[381,385,386],{},"Rôle",[388,389,390,414,428],"tbody",{},[378,391,392,402],{},[393,394,395,398,399],"td",{},[17,396,397],{},"width",", ",[17,400,401],{},"height",[393,403,404,405,398,408,398,410,413],{},"Taille, en longueur CSS seule : ",[17,406,407],{},"120px",[17,409,160],{},[17,411,412],{},"1.5rem",". Une autre valeur est ignorée et un avertissement s'affiche dans la console.",[378,415,416,421],{},[393,417,418],{},[17,419,420],{},"css_class",[393,422,423,424,427],{},"Classes en plus, par exemple ",[17,425,426],{},"rounded-full"," pour un avatar.",[378,429,430,435],{},[393,431,432],{},[17,433,434],{},"attrs",[393,436,437],{},"Attributs HTML en plus.",[14,439,440,441,444],{},"Le bloc porte ",[17,442,443],{},"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.",[14,446,447],{},"Dans du HTML construit en chaîne :",[44,449,451],{"className":46,"code":450,"language":48,"meta":49,"style":49},"const html = `\u003Cdiv class=\"flex gap-2\">${frappe.ui.skeleton.html({ width: \"32px\", height: \"32px\", css_class: \"rounded-full\" })}\u003C\u002Fdiv>`;\n",[17,452,453],{"__ignoreMap":49},[53,454,455,457,460,462,465,468,471,473,475,477,479,481,483,486,488,490,492,494,496,499,501,503,505,507,509,511,513,515,517,519,521,523,525,527,529,531,534,537],{"class":55,"line":56},[53,456,60],{"class":59},[53,458,459],{"class":63}," html ",[53,461,68],{"class":67},[53,463,464],{"class":67}," `",[53,466,467],{"class":95},"\u003Cdiv class=\"flex gap-2\">",[53,469,470],{"class":67},"${",[53,472,265],{"class":63},[53,474,78],{"class":67},[53,476,137],{"class":63},[53,478,78],{"class":67},[53,480,142],{"class":63},[53,482,78],{"class":67},[53,484,485],{"class":71},"html",[53,487,89],{"class":63},[53,489,147],{"class":67},[53,491,151],{"class":150},[53,493,154],{"class":67},[53,495,157],{"class":67},[53,497,498],{"class":95},"32px",[53,500,92],{"class":67},[53,502,165],{"class":67},[53,504,168],{"class":150},[53,506,154],{"class":67},[53,508,157],{"class":67},[53,510,498],{"class":95},[53,512,92],{"class":67},[53,514,165],{"class":67},[53,516,231],{"class":150},[53,518,154],{"class":67},[53,520,157],{"class":67},[53,522,426],{"class":95},[53,524,92],{"class":67},[53,526,180],{"class":67},[53,528,101],{"class":63},[53,530,363],{"class":67},[53,532,533],{"class":95},"\u003C\u002Fdiv>",[53,535,536],{"class":67},"`",[53,538,104],{"class":67},[36,540,542],{"id":541},"divider-ligne-de-séparation","Divider : ligne de séparation",[44,544,546],{"className":46,"code":545,"language":48,"meta":49,"style":49},"$(page.body).append(frappe.ui.divider());\n",[17,547,548],{"__ignoreMap":49},[53,549,550,553,555,557,559,561,563,566,568,570,572,575,578],{"class":55,"line":56},[53,551,552],{"class":71},"$",[53,554,75],{"class":63},[53,556,78],{"class":67},[53,558,81],{"class":63},[53,560,78],{"class":67},[53,562,123],{"class":71},[53,564,565],{"class":63},"(frappe",[53,567,78],{"class":67},[53,569,137],{"class":63},[53,571,78],{"class":67},[53,573,574],{"class":71},"divider",[53,576,577],{"class":63},"())",[53,579,104],{"class":67},[372,581,582,593],{},[375,583,584],{},[378,585,586,588,591],{},[381,587,383],{},[381,589,590],{},"Défaut",[381,592,386],{},[388,594,595,615,628,643,666],{},[378,596,597,602,607],{},[393,598,599],{},[17,600,601],{},"orientation",[393,603,604],{},[17,605,606],{},"horizontal",[393,608,609,611,612,78],{},[17,610,606],{}," ou ",[17,613,614],{},"vertical",[378,616,617,622,625],{},[393,618,619],{},[17,620,621],{},"flex_item",[393,623,624],{},"—",[393,626,627],{},"Pour une ligne verticale dans une rangée flex : la ligne prend la hauteur de la rangée.",[378,629,630,635,637],{},[393,631,632],{},[17,633,634],{},"action",[393,636,624],{},[393,638,639,640,78],{},"Bouton sur la ligne (horizontale seulement) : ",[17,641,642],{},"{ label, onclick, loading }",[378,644,645,650,655],{},[393,646,647],{},[17,648,649],{},"position",[393,651,652],{},[17,653,654],{},"center",[393,656,657,658,398,661,611,663,78],{},"Place du bouton sur la ligne : ",[17,659,660],{},"start",[17,662,654],{},[17,664,665],{},"end",[378,667,668,674,676],{},[393,669,670,398,672],{},[17,671,420],{},[17,673,434],{},[393,675,624],{},[393,677,678],{},"Classes et attributs HTML en plus.",[680,681,683],"h3",{"id":682},"ligne-avec-un-bouton-charger-plus","Ligne avec un bouton « Charger plus »",[44,685,687],{"className":46,"code":686,"language":48,"meta":49,"style":49},"const $divider = frappe.ui.divider({\n    action: {\n        label: __(\"Load More\"),\n        onclick: () => charger_page_suivante(),\n    },\n});\n$(page.body).find(\".liste\").after($divider);\n",[17,688,689,714,723,746,765,770,778],{"__ignoreMap":49},[53,690,691,693,696,698,701,703,705,707,709,711],{"class":55,"line":56},[53,692,60],{"class":59},[53,694,695],{"class":63}," $divider ",[53,697,68],{"class":67},[53,699,700],{"class":63}," frappe",[53,702,78],{"class":67},[53,704,137],{"class":63},[53,706,78],{"class":67},[53,708,574],{"class":71},[53,710,89],{"class":63},[53,712,713],{"class":67},"{\n",[53,715,716,719,721],{"class":55,"line":107},[53,717,718],{"class":150},"    action",[53,720,154],{"class":67},[53,722,327],{"class":67},[53,724,725,728,730,733,735,737,740,742,744],{"class":55,"line":129},[53,726,727],{"class":150},"        label",[53,729,154],{"class":67},[53,731,732],{"class":71}," __",[53,734,89],{"class":63},[53,736,92],{"class":67},[53,738,739],{"class":95},"Load More",[53,741,92],{"class":67},[53,743,101],{"class":63},[53,745,185],{"class":67},[53,747,748,751,753,756,758,761,763],{"class":55,"line":188},[53,749,750],{"class":71},"        onclick",[53,752,154],{"class":67},[53,754,755],{"class":67}," ()",[53,757,324],{"class":59},[53,759,760],{"class":71}," charger_page_suivante",[53,762,118],{"class":63},[53,764,185],{"class":67},[53,766,767],{"class":55,"line":248},[53,768,769],{"class":67},"    },\n",[53,771,772,774,776],{"class":55,"line":255},[53,773,363],{"class":67},[53,775,101],{"class":63},[53,777,104],{"class":67},[53,779,780,782,784,786,788,790,792,794,796,799,801,803,805,808,811],{"class":55,"line":262},[53,781,552],{"class":71},[53,783,75],{"class":63},[53,785,78],{"class":67},[53,787,81],{"class":63},[53,789,78],{"class":67},[53,791,86],{"class":71},[53,793,89],{"class":63},[53,795,92],{"class":67},[53,797,798],{"class":95},".liste",[53,800,92],{"class":67},[53,802,101],{"class":63},[53,804,78],{"class":67},[53,806,807],{"class":71},"after",[53,809,810],{"class":63},"($divider)",[53,812,104],{"class":67},[14,814,815,816,819,820,825,826,829,830,78],{},"Si ",[17,817,818],{},"onclick"," renvoie une promesse, le bouton affiche un indicateur de chargement jusqu'à sa fin. Le bouton est un ",[26,821,822],{"href":28},[17,823,824],{},"frappe.ui.button"," de taille ",[17,827,828],{},"sm"," et de style ",[17,831,832],{},"outline",[834,835,836],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":49,"searchDepth":56,"depth":107,"links":838},[839,840],{"id":38,"depth":107,"text":39},{"id":541,"depth":107,"text":542,"children":841},[842],{"id":682,"depth":129,"text":683},"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.","md",{"reviewed":258,"last_verified":846,"sources":847},"2026-11-03",[848,849,850],"dodock@develop:frappe\u002Fpublic\u002Fjs\u002Ffrappe\u002Fui\u002Fcomponents\u002Fskeleton.js","dodock@develop:frappe\u002Fpublic\u002Fjs\u002Ffrappe\u002Fui\u002Fcomponents\u002Fdivider.js","dodock@develop:frappe\u002Fpublic\u002Fcss\u002Fespresso\u002Fcomponents\u002Fskeleton.css","\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Futiliser-les-composants-skeleton-et-divider",{"title":5,"description":843},"2.next\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Futiliser-les-composants-skeleton-et-divider","hngJdxJaNyWTgIVLpBfOwkMXAgFpzVl_hkECPmxGIhk",{},1793871741458]