[{"data":1,"prerenderedAt":1395},["ShallowReactive",2],{"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Favatar-group":3,"section:\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Favatar-group":1394},{"id":4,"title":5,"body":6,"description":1384,"extension":281,"meta":1385,"navigation":1386,"path":1390,"seo":1391,"stem":1392,"__hash__":1393},"docs\u002F2.next\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Favatar-group.md","Groupe d'avatars",{"type":7,"value":8,"toc":1366},"minimark",[9,13,22,27,60,64,69,75,442,446,452,673,677,932,936,940,949,953,961,965,974,978,1002,1006,1010,1107,1111,1362],[10,11,5],"h1",{"id":12},"groupe-davatars",[14,15,16,17,21],"p",{},"Le composant ",[18,19,20],"code",{},"frappe.ui.avatar_group"," affiche une série d'avatars qui se chevauchent. Il limite le nombre d'avatars visibles et ajoute un cercle « +N » pour le reste. Vous pouvez l'utiliser pour représenter des personnes affectées à une tâche, des spectateurs d'un document ou des destinataires d'un partage.",[23,24,26],"h2",{"id":25},"prérequis","Prérequis",[28,29,30,36],"ul",{},[31,32,33,35],"li",{},[18,34,20],{}," est disponible côté navigateur dans le desk Dodock.",[31,37,38,39,42,43,46,47,46,50,46,53,46,56,59],{},"Les options de chaque avatar correspondent à celles de ",[18,40,41],{},"frappe.ui.avatar"," (",[18,44,45],{},"label",", ",[18,48,49],{},"image",[18,51,52],{},"theme",[18,54,55],{},"title",[18,57,58],{},"indicator",").",[23,61,63],{"id":62},"appeler-le-composant","Appeler le composant",[65,66,68],"h3",{"id":67},"forme-jquery","Forme jQuery",[14,70,71,74],{},[18,72,73],{},"frappe.ui.avatar_group(opts)"," renvoie un élément jQuery interactif. C'est la forme à privilégier pour le desk et les pages construites en jQuery.",[76,77,82],"pre",{"className":78,"code":79,"language":80,"meta":81,"style":81},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const $group = frappe.ui.avatar_group({\n    avatars: [\n        { label: \"Camille Martin\", image: \"\u002Fassets\u002Fcamille.jpg\" },\n        { label: \"Idris Benali\" },\n        { label: \"Sara Lemoine\" },\n        { label: \"Léa Costa\" },\n        { label: \"Yan Girard\" },\n    ],\n    max: 3,\n    size: \"md\",\n    shape: \"circle\",\n    theme: \"auto\",\n    onclick: (avatar, e) => {\n        frappe.ui.toast({ message: `Clic sur ${avatar.label}` });\n    },\n});\n$(\"#mon-conteneur\").append($group);\n","js","",[18,83,84,122,135,174,192,210,228,246,255,269,286,303,320,348,399,405,415],{"__ignoreMap":81},[85,86,89,93,97,101,104,107,110,112,116,119],"span",{"class":87,"line":88},"line",1,[85,90,92],{"class":91},"spNyl","const",[85,94,96],{"class":95},"sTEyZ"," $group ",[85,98,100],{"class":99},"sMK4o","=",[85,102,103],{"class":95}," frappe",[85,105,106],{"class":99},".",[85,108,109],{"class":95},"ui",[85,111,106],{"class":99},[85,113,115],{"class":114},"s2Zo4","avatar_group",[85,117,118],{"class":95},"(",[85,120,121],{"class":99},"{\n",[85,123,125,129,132],{"class":87,"line":124},2,[85,126,128],{"class":127},"swJcz","    avatars",[85,130,131],{"class":99},":",[85,133,134],{"class":95}," [\n",[85,136,138,141,144,146,149,153,156,159,162,164,166,169,171],{"class":87,"line":137},3,[85,139,140],{"class":99},"        {",[85,142,143],{"class":127}," label",[85,145,131],{"class":99},[85,147,148],{"class":99}," \"",[85,150,152],{"class":151},"sfazB","Camille Martin",[85,154,155],{"class":99},"\"",[85,157,158],{"class":99},",",[85,160,161],{"class":127}," image",[85,163,131],{"class":99},[85,165,148],{"class":99},[85,167,168],{"class":151},"\u002Fassets\u002Fcamille.jpg",[85,170,155],{"class":99},[85,172,173],{"class":99}," },\n",[85,175,177,179,181,183,185,188,190],{"class":87,"line":176},4,[85,178,140],{"class":99},[85,180,143],{"class":127},[85,182,131],{"class":99},[85,184,148],{"class":99},[85,186,187],{"class":151},"Idris Benali",[85,189,155],{"class":99},[85,191,173],{"class":99},[85,193,195,197,199,201,203,206,208],{"class":87,"line":194},5,[85,196,140],{"class":99},[85,198,143],{"class":127},[85,200,131],{"class":99},[85,202,148],{"class":99},[85,204,205],{"class":151},"Sara Lemoine",[85,207,155],{"class":99},[85,209,173],{"class":99},[85,211,213,215,217,219,221,224,226],{"class":87,"line":212},6,[85,214,140],{"class":99},[85,216,143],{"class":127},[85,218,131],{"class":99},[85,220,148],{"class":99},[85,222,223],{"class":151},"Léa Costa",[85,225,155],{"class":99},[85,227,173],{"class":99},[85,229,231,233,235,237,239,242,244],{"class":87,"line":230},7,[85,232,140],{"class":99},[85,234,143],{"class":127},[85,236,131],{"class":99},[85,238,148],{"class":99},[85,240,241],{"class":151},"Yan Girard",[85,243,155],{"class":99},[85,245,173],{"class":99},[85,247,249,252],{"class":87,"line":248},8,[85,250,251],{"class":95},"    ]",[85,253,254],{"class":99},",\n",[85,256,258,261,263,267],{"class":87,"line":257},9,[85,259,260],{"class":127},"    max",[85,262,131],{"class":99},[85,264,266],{"class":265},"sbssI"," 3",[85,268,254],{"class":99},[85,270,272,275,277,279,282,284],{"class":87,"line":271},10,[85,273,274],{"class":127},"    size",[85,276,131],{"class":99},[85,278,148],{"class":99},[85,280,281],{"class":151},"md",[85,283,155],{"class":99},[85,285,254],{"class":99},[85,287,289,292,294,296,299,301],{"class":87,"line":288},11,[85,290,291],{"class":127},"    shape",[85,293,131],{"class":99},[85,295,148],{"class":99},[85,297,298],{"class":151},"circle",[85,300,155],{"class":99},[85,302,254],{"class":99},[85,304,306,309,311,313,316,318],{"class":87,"line":305},12,[85,307,308],{"class":127},"    theme",[85,310,131],{"class":99},[85,312,148],{"class":99},[85,314,315],{"class":151},"auto",[85,317,155],{"class":99},[85,319,254],{"class":99},[85,321,323,326,328,330,334,336,339,342,345],{"class":87,"line":322},13,[85,324,325],{"class":114},"    onclick",[85,327,131],{"class":99},[85,329,42],{"class":99},[85,331,333],{"class":332},"sHdIc","avatar",[85,335,158],{"class":99},[85,337,338],{"class":332}," e",[85,340,341],{"class":99},")",[85,343,344],{"class":91}," =>",[85,346,347],{"class":99}," {\n",[85,349,351,354,356,358,360,363,365,368,371,373,376,379,382,384,386,388,391,394,396],{"class":87,"line":350},14,[85,352,353],{"class":95},"        frappe",[85,355,106],{"class":99},[85,357,109],{"class":95},[85,359,106],{"class":99},[85,361,362],{"class":114},"toast",[85,364,118],{"class":127},[85,366,367],{"class":99},"{",[85,369,370],{"class":127}," message",[85,372,131],{"class":99},[85,374,375],{"class":99}," `",[85,377,378],{"class":151},"Clic sur ",[85,380,381],{"class":99},"${",[85,383,333],{"class":95},[85,385,106],{"class":99},[85,387,45],{"class":95},[85,389,390],{"class":99},"}`",[85,392,393],{"class":99}," }",[85,395,341],{"class":127},[85,397,398],{"class":99},";\n",[85,400,402],{"class":87,"line":401},15,[85,403,404],{"class":99},"    },\n",[85,406,408,411,413],{"class":87,"line":407},16,[85,409,410],{"class":99},"}",[85,412,341],{"class":95},[85,414,398],{"class":99},[85,416,418,421,423,425,428,430,432,434,437,440],{"class":87,"line":417},17,[85,419,420],{"class":114},"$",[85,422,118],{"class":95},[85,424,155],{"class":99},[85,426,427],{"class":151},"#mon-conteneur",[85,429,155],{"class":99},[85,431,341],{"class":95},[85,433,106],{"class":99},[85,435,436],{"class":114},"append",[85,438,439],{"class":95},"($group)",[85,441,398],{"class":99},[65,443,445],{"id":444},"forme-html","Forme HTML",[14,447,448,451],{},[18,449,450],{},"frappe.ui.avatar_group.html(opts)"," renvoie une chaîne de balisage, sans gestionnaires d'événements ni info-bulles enrichies. C'est utile dans les vues de liste ou les colonnes Kanban où l'interface est construite à partir de chaînes HTML.",[76,453,455],{"className":78,"code":454,"language":80,"meta":81,"style":81},"const html = frappe.ui.avatar_group.html({\n    avatars: users.map((u) => {\n        const { fullname, image } = frappe.user_info(u);\n        return {\n            label: fullname,\n            image,\n            css_class: \"filterable\",\n            attrs: { \"data-filter\": `_assign,like,%${u}%` },\n        };\n    }),\n    max: 4,\n    size: \"md\",\n});\n",[18,456,457,485,512,547,555,566,573,589,626,631,640,651,665],{"__ignoreMap":81},[85,458,459,461,464,466,468,470,472,474,476,478,481,483],{"class":87,"line":88},[85,460,92],{"class":91},[85,462,463],{"class":95}," html ",[85,465,100],{"class":99},[85,467,103],{"class":95},[85,469,106],{"class":99},[85,471,109],{"class":95},[85,473,106],{"class":99},[85,475,115],{"class":95},[85,477,106],{"class":99},[85,479,480],{"class":114},"html",[85,482,118],{"class":95},[85,484,121],{"class":99},[85,486,487,489,491,494,496,499,501,503,506,508,510],{"class":87,"line":124},[85,488,128],{"class":127},[85,490,131],{"class":99},[85,492,493],{"class":95}," users",[85,495,106],{"class":99},[85,497,498],{"class":114},"map",[85,500,118],{"class":95},[85,502,118],{"class":99},[85,504,505],{"class":332},"u",[85,507,341],{"class":99},[85,509,344],{"class":91},[85,511,347],{"class":99},[85,513,514,517,520,523,525,527,529,532,534,536,539,541,543,545],{"class":87,"line":137},[85,515,516],{"class":91},"        const",[85,518,519],{"class":99}," {",[85,521,522],{"class":95}," fullname",[85,524,158],{"class":99},[85,526,161],{"class":95},[85,528,393],{"class":99},[85,530,531],{"class":99}," =",[85,533,103],{"class":95},[85,535,106],{"class":99},[85,537,538],{"class":114},"user_info",[85,540,118],{"class":127},[85,542,505],{"class":95},[85,544,341],{"class":127},[85,546,398],{"class":99},[85,548,549,553],{"class":87,"line":176},[85,550,552],{"class":551},"s7zQu","        return",[85,554,347],{"class":99},[85,556,557,560,562,564],{"class":87,"line":194},[85,558,559],{"class":127},"            label",[85,561,131],{"class":99},[85,563,522],{"class":95},[85,565,254],{"class":99},[85,567,568,571],{"class":87,"line":212},[85,569,570],{"class":95},"            image",[85,572,254],{"class":99},[85,574,575,578,580,582,585,587],{"class":87,"line":230},[85,576,577],{"class":127},"            css_class",[85,579,131],{"class":99},[85,581,148],{"class":99},[85,583,584],{"class":151},"filterable",[85,586,155],{"class":99},[85,588,254],{"class":99},[85,590,591,594,596,598,600,603,605,607,609,612,614,616,618,621,624],{"class":87,"line":248},[85,592,593],{"class":127},"            attrs",[85,595,131],{"class":99},[85,597,519],{"class":99},[85,599,148],{"class":99},[85,601,602],{"class":127},"data-filter",[85,604,155],{"class":99},[85,606,131],{"class":99},[85,608,375],{"class":99},[85,610,611],{"class":151},"_assign,like,%",[85,613,381],{"class":99},[85,615,505],{"class":95},[85,617,410],{"class":99},[85,619,620],{"class":151},"%",[85,622,623],{"class":99},"`",[85,625,173],{"class":99},[85,627,628],{"class":87,"line":257},[85,629,630],{"class":99},"        };\n",[85,632,633,636,638],{"class":87,"line":271},[85,634,635],{"class":99},"    }",[85,637,341],{"class":95},[85,639,254],{"class":99},[85,641,642,644,646,649],{"class":87,"line":288},[85,643,260],{"class":127},[85,645,131],{"class":99},[85,647,648],{"class":265}," 4",[85,650,254],{"class":99},[85,652,653,655,657,659,661,663],{"class":87,"line":305},[85,654,274],{"class":127},[85,656,131],{"class":99},[85,658,148],{"class":99},[85,660,281],{"class":151},[85,662,155],{"class":99},[85,664,254],{"class":99},[85,666,667,669,671],{"class":87,"line":322},[85,668,410],{"class":99},[85,670,341],{"class":95},[85,672,398],{"class":99},[23,674,676],{"id":675},"options","Options",[678,679,680,699],"table",{},[681,682,683],"thead",{},[684,685,686,690,693,696],"tr",{},[687,688,689],"th",{},"Option",[687,691,692],{},"Type",[687,694,695],{},"Défaut",[687,697,698],{},"Rôle",[700,701,702,725,745,785,810,831,849,872,900,916],"tbody",{},[684,703,704,710,715,720],{},[705,706,707],"td",{},[18,708,709],{},"avatars",[705,711,712],{},[18,713,714],{},"Object[]",[705,716,717],{},[18,718,719],{},"[]",[705,721,722,723,106],{},"Personnes à afficher. Chaque objet accepte les options de ",[18,724,41],{},[684,726,727,732,737,742],{},[705,728,729],{},[18,730,731],{},"max",[705,733,734],{},[18,735,736],{},"number",[705,738,739],{},[18,740,741],{},"3",[705,743,744],{},"Nombre d'avatars visibles avant le cercle « +N ». Le composant n'affiche jamais « +1 » : une personne masquée remplace le cercle.",[684,746,747,752,757,762],{},[705,748,749],{},[18,750,751],{},"size",[705,753,754],{},[18,755,756],{},"string",[705,758,759],{},[18,760,761],{},"\"md\"",[705,763,764,765,46,768,46,771,46,773,46,776,46,779,46,782,106],{},"Taille des avatars : ",[18,766,767],{},"xs",[18,769,770],{},"sm",[18,772,281],{},[18,774,775],{},"lg",[18,777,778],{},"xl",[18,780,781],{},"2xl",[18,783,784],{},"3xl",[684,786,787,792,796,801],{},[705,788,789],{},[18,790,791],{},"shape",[705,793,794],{},[18,795,756],{},[705,797,798],{},[18,799,800],{},"\"circle\"",[705,802,803,804,806,807,106],{},"Forme des avatars : ",[18,805,298],{}," ou ",[18,808,809],{},"square",[684,811,812,816,820,825],{},[705,813,814],{},[18,815,52],{},[705,817,818],{},[18,819,756],{},[705,821,822],{},[18,823,824],{},"\"auto\"",[705,826,827,828,830],{},"Couleur de l'initiale. ",[18,829,824],{}," attribue à chaque nom une couleur stable déduite du libellé. Un thème défini sur un avatar précède celui du groupe.",[684,832,833,838,843,846],{},[705,834,835],{},[18,836,837],{},"onclick",[705,839,840],{},[18,841,842],{},"function",[705,844,845],{},"—",[705,847,848],{},"Transforme chaque avatar en bouton. La fonction reçoit l'avatar cliqué et l'événement. La liste « +N » s'ouvre alors au clic et ses lignes déclenchent aussi la fonction.",[684,850,851,856,860,862],{},[705,852,853],{},[18,854,855],{},"hover_card",[705,857,858],{},[18,859,842],{},[705,861,845],{},[705,863,864,865,868,869,871],{},"Remplace l'info-bulle du nom par une carte au survol. La fonction reçoit l'avatar et l'instance ",[18,866,867],{},"HoverCard"," (à fermer depuis l'intérieur si nécessaire) et renvoie le contenu à afficher. Sans ",[18,870,837],{},", la liste « +N » est en lecture seule et s'ouvre au survol.",[684,873,874,879,884,886],{},[705,875,876],{},[18,877,878],{},"add",[705,880,881],{},[18,882,883],{},"Object",[705,885,845],{},[705,887,888,889,46,891,42,894,897,898,106],{},"Affiche un bouton d'ajout après les avatars. Contient ",[18,890,55],{},[18,892,893],{},"icon",[18,895,896],{},"\"plus\""," par défaut) et ",[18,899,837],{},[684,901,902,907,911,913],{},[705,903,904],{},[18,905,906],{},"css_class",[705,908,909],{},[18,910,756],{},[705,912,845],{},[705,914,915],{},"Classes CSS supplémentaires sur le conteneur.",[684,917,918,923,927,929],{},[705,919,920],{},[18,921,922],{},"attrs",[705,924,925],{},[18,926,883],{},[705,928,845],{},[705,930,931],{},"Attributs HTML supplémentaires sur le conteneur.",[23,933,935],{"id":934},"comportements-clés","Comportements clés",[65,937,939],{"id":938},"débordement-n","Débordement « +N »",[14,941,942,943,945,946,948],{},"Au-delà de ",[18,944,731],{}," avatars, un cercle « +N » indique combien de personnes sont masquées. Si une seule personne est masquée, le composant affiche son avatar plutôt qu'un « +1 ». En lecture seule, la liste détaillée s'ouvre au survol et se ferme quand le pointeur quitte la zone. Avec ",[18,947,837],{},", la liste s'ouvre au clic et chaque ligne déclenche l'action.",[65,950,952],{"id":951},"thème-automatique","Thème automatique",[14,954,955,956,958,959,106],{},"Le thème ",[18,957,824],{}," calcule une couleur à partir du libellé. Un même nom obtient toujours la même couleur, sans configuration supplémentaire. Un thème explicite sur un avatar ou sur le groupe passe avant ",[18,960,824],{},[65,962,964],{"id":963},"bouton-dajout","Bouton d'ajout",[14,966,967,968,970,971,973],{},"L'option ",[18,969,878],{}," ajoute un bouton à la fin du groupe. Il peut servir à affecter une nouvelle personne ou à ouvrir un dialogue. Le bouton est masqué si ",[18,972,878],{}," n'est pas fourni.",[65,975,977],{"id":976},"accessibilité","Accessibilité",[14,979,980,981,983,984,987,988,990,991,994,995,998,999,1001],{},"Quand ",[18,982,837],{}," est fourni, les avatars deviennent des éléments ",[18,985,986],{},"\u003Cbutton>"," et la liste « +N » s'ouvre au clic. Sans ",[18,989,837],{},", la liste est en lecture seule : le cercle « +N » reçoit un attribut ",[18,992,993],{},"tabindex"," et un ",[18,996,997],{},"aria-label"," listant les noms masqués, de façon à rester accessible au clavier et aux lecteurs d'écran. La carte de survol (",[18,1000,855],{},") n'est pas accessible au toucher : prévoyez un autre moyen d'accès pour toute action essentielle.",[23,1003,1005],{"id":1004},"exemples","Exemples",[65,1007,1009],{"id":1008},"bouton-daffectation","Bouton d'affectation",[76,1011,1013],{"className":78,"code":1012,"language":80,"meta":81,"style":81},"frappe.ui.avatar_group({\n    avatars: assignees,\n    add: {\n        title: __(\"Affecter\"),\n        onclick: () => ouvrir_dialogue_affectation(),\n    },\n});\n",[18,1014,1015,1032,1043,1052,1075,1095,1099],{"__ignoreMap":81},[85,1016,1017,1020,1022,1024,1026,1028,1030],{"class":87,"line":88},[85,1018,1019],{"class":95},"frappe",[85,1021,106],{"class":99},[85,1023,109],{"class":95},[85,1025,106],{"class":99},[85,1027,115],{"class":114},[85,1029,118],{"class":95},[85,1031,121],{"class":99},[85,1033,1034,1036,1038,1041],{"class":87,"line":124},[85,1035,128],{"class":127},[85,1037,131],{"class":99},[85,1039,1040],{"class":95}," assignees",[85,1042,254],{"class":99},[85,1044,1045,1048,1050],{"class":87,"line":137},[85,1046,1047],{"class":127},"    add",[85,1049,131],{"class":99},[85,1051,347],{"class":99},[85,1053,1054,1057,1059,1062,1064,1066,1069,1071,1073],{"class":87,"line":176},[85,1055,1056],{"class":127},"        title",[85,1058,131],{"class":99},[85,1060,1061],{"class":114}," __",[85,1063,118],{"class":95},[85,1065,155],{"class":99},[85,1067,1068],{"class":151},"Affecter",[85,1070,155],{"class":99},[85,1072,341],{"class":95},[85,1074,254],{"class":99},[85,1076,1077,1080,1082,1085,1087,1090,1093],{"class":87,"line":194},[85,1078,1079],{"class":114},"        onclick",[85,1081,131],{"class":99},[85,1083,1084],{"class":99}," ()",[85,1086,344],{"class":91},[85,1088,1089],{"class":114}," ouvrir_dialogue_affectation",[85,1091,1092],{"class":95},"()",[85,1094,254],{"class":99},[85,1096,1097],{"class":87,"line":212},[85,1098,404],{"class":99},[85,1100,1101,1103,1105],{"class":87,"line":230},[85,1102,410],{"class":99},[85,1104,341],{"class":95},[85,1106,398],{"class":99},[65,1108,1110],{"id":1109},"carte-de-survol-personnalisée","Carte de survol personnalisée",[76,1112,1114],{"className":78,"code":1113,"language":80,"meta":81,"style":81},"frappe.ui.avatar_group({\n    avatars: viewers,\n    hover_card: (avatar, card) => {\n        const $card = $('\u003Cdiv class=\"flex gap-3 items-center\">\u003C\u002Fdiv>');\n        $card.append(\n            frappe.ui.avatar({ ...avatar, size: \"xl\" }),\n            $('\u003Cdiv>\u003C\u002Fdiv>').append(\n                $('\u003Cdiv class=\"text-base-medium text-ink-gray-8\">\u003C\u002Fdiv>').text(avatar.label),\n                $('\u003Cdiv class=\"text-sm text-ink-gray-5\">\u003C\u002Fdiv>').text(\"En cours de consultation\")\n            )\n        );\n        return $card;\n    },\n});\n",[18,1115,1116,1132,1143,1165,1191,1203,1244,1266,1299,1330,1335,1342,1350,1354],{"__ignoreMap":81},[85,1117,1118,1120,1122,1124,1126,1128,1130],{"class":87,"line":88},[85,1119,1019],{"class":95},[85,1121,106],{"class":99},[85,1123,109],{"class":95},[85,1125,106],{"class":99},[85,1127,115],{"class":114},[85,1129,118],{"class":95},[85,1131,121],{"class":99},[85,1133,1134,1136,1138,1141],{"class":87,"line":124},[85,1135,128],{"class":127},[85,1137,131],{"class":99},[85,1139,1140],{"class":95}," viewers",[85,1142,254],{"class":99},[85,1144,1145,1148,1150,1152,1154,1156,1159,1161,1163],{"class":87,"line":137},[85,1146,1147],{"class":114},"    hover_card",[85,1149,131],{"class":99},[85,1151,42],{"class":99},[85,1153,333],{"class":332},[85,1155,158],{"class":99},[85,1157,1158],{"class":332}," card",[85,1160,341],{"class":99},[85,1162,344],{"class":91},[85,1164,347],{"class":99},[85,1166,1167,1169,1172,1174,1177,1179,1182,1185,1187,1189],{"class":87,"line":176},[85,1168,516],{"class":91},[85,1170,1171],{"class":95}," $card",[85,1173,531],{"class":99},[85,1175,1176],{"class":114}," $",[85,1178,118],{"class":127},[85,1180,1181],{"class":99},"'",[85,1183,1184],{"class":151},"\u003Cdiv class=\"flex gap-3 items-center\">\u003C\u002Fdiv>",[85,1186,1181],{"class":99},[85,1188,341],{"class":127},[85,1190,398],{"class":99},[85,1192,1193,1196,1198,1200],{"class":87,"line":194},[85,1194,1195],{"class":95},"        $card",[85,1197,106],{"class":99},[85,1199,436],{"class":114},[85,1201,1202],{"class":127},"(\n",[85,1204,1205,1208,1210,1212,1214,1216,1218,1220,1223,1225,1227,1230,1232,1234,1236,1238,1240,1242],{"class":87,"line":212},[85,1206,1207],{"class":95},"            frappe",[85,1209,106],{"class":99},[85,1211,109],{"class":95},[85,1213,106],{"class":99},[85,1215,333],{"class":114},[85,1217,118],{"class":127},[85,1219,367],{"class":99},[85,1221,1222],{"class":99}," ...",[85,1224,333],{"class":95},[85,1226,158],{"class":99},[85,1228,1229],{"class":127}," size",[85,1231,131],{"class":99},[85,1233,148],{"class":99},[85,1235,778],{"class":151},[85,1237,155],{"class":99},[85,1239,393],{"class":99},[85,1241,341],{"class":127},[85,1243,254],{"class":99},[85,1245,1246,1249,1251,1253,1256,1258,1260,1262,1264],{"class":87,"line":230},[85,1247,1248],{"class":114},"            $",[85,1250,118],{"class":127},[85,1252,1181],{"class":99},[85,1254,1255],{"class":151},"\u003Cdiv>\u003C\u002Fdiv>",[85,1257,1181],{"class":99},[85,1259,341],{"class":127},[85,1261,106],{"class":99},[85,1263,436],{"class":114},[85,1265,1202],{"class":127},[85,1267,1268,1271,1273,1275,1278,1280,1282,1284,1287,1289,1291,1293,1295,1297],{"class":87,"line":248},[85,1269,1270],{"class":114},"                $",[85,1272,118],{"class":127},[85,1274,1181],{"class":99},[85,1276,1277],{"class":151},"\u003Cdiv class=\"text-base-medium text-ink-gray-8\">\u003C\u002Fdiv>",[85,1279,1181],{"class":99},[85,1281,341],{"class":127},[85,1283,106],{"class":99},[85,1285,1286],{"class":114},"text",[85,1288,118],{"class":127},[85,1290,333],{"class":95},[85,1292,106],{"class":99},[85,1294,45],{"class":95},[85,1296,341],{"class":127},[85,1298,254],{"class":99},[85,1300,1301,1303,1305,1307,1310,1312,1314,1316,1318,1320,1322,1325,1327],{"class":87,"line":257},[85,1302,1270],{"class":114},[85,1304,118],{"class":127},[85,1306,1181],{"class":99},[85,1308,1309],{"class":151},"\u003Cdiv class=\"text-sm text-ink-gray-5\">\u003C\u002Fdiv>",[85,1311,1181],{"class":99},[85,1313,341],{"class":127},[85,1315,106],{"class":99},[85,1317,1286],{"class":114},[85,1319,118],{"class":127},[85,1321,155],{"class":99},[85,1323,1324],{"class":151},"En cours de consultation",[85,1326,155],{"class":99},[85,1328,1329],{"class":127},")\n",[85,1331,1332],{"class":87,"line":271},[85,1333,1334],{"class":127},"            )\n",[85,1336,1337,1340],{"class":87,"line":288},[85,1338,1339],{"class":127},"        )",[85,1341,398],{"class":99},[85,1343,1344,1346,1348],{"class":87,"line":305},[85,1345,552],{"class":551},[85,1347,1171],{"class":95},[85,1349,398],{"class":99},[85,1351,1352],{"class":87,"line":322},[85,1353,404],{"class":99},[85,1355,1356,1358,1360],{"class":87,"line":350},[85,1357,410],{"class":99},[85,1359,341],{"class":95},[85,1361,398],{"class":99},[1363,1364,1365],"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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}",{"title":81,"searchDepth":88,"depth":124,"links":1367},[1368,1369,1373,1374,1380],{"id":25,"depth":124,"text":26},{"id":62,"depth":124,"text":63,"children":1370},[1371,1372],{"id":67,"depth":137,"text":68},{"id":444,"depth":137,"text":445},{"id":675,"depth":124,"text":676},{"id":934,"depth":124,"text":935,"children":1375},[1376,1377,1378,1379],{"id":938,"depth":137,"text":939},{"id":951,"depth":137,"text":952},{"id":963,"depth":137,"text":964},{"id":976,"depth":137,"text":977},{"id":1004,"depth":124,"text":1005,"children":1381},[1382,1383],{"id":1008,"depth":137,"text":1009},{"id":1109,"depth":137,"text":1110},"Afficher plusieurs avatars superposés avec débordement et actions en JavaScript.",{"reviewed":1386,"last_verified":1387,"sources":1388},true,"2026-11-03",[1389],"dodock@develop:frappe\u002Fpublic\u002Fjs\u002Ffrappe\u002Fui\u002Fcomponents\u002Favatar_group.js","\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Favatar-group",{"title":5,"description":1384},"2.next\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Favatar-group","ctwfy7htVvtq5cIVnUJ5gfkTPPKTjT7pMBk-Yqa0zKc",{},1793871736533]