[{"data":1,"prerenderedAt":174},["ShallowReactive",2],{"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Futiliser_component_explorer":3,"section:\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Futiliser_component_explorer":173},{"id":4,"title":5,"body":6,"description":159,"extension":160,"meta":161,"navigation":163,"path":169,"seo":170,"stem":171,"__hash__":172},"docs\u002F2.next\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Futiliser_component_explorer.md","Explorer les composants de Dodock",{"type":7,"value":8,"toc":151},"minimark",[9,13,27,34,39,58,64,80,84,121,131,135],[10,11,5],"h1",{"id":12},"explorer-les-composants-de-dodock",[14,15,16,17,21,22,26],"p",{},"L'",[18,19,20],"strong",{},"Explorateur de composants"," (page « Component Explorer ») est un catalogue des composants d'interface de Dodock : boutons, listes déroulantes, groupes d'avatars, notifications… Pour chaque composant, il affiche des exemples de code ",[23,24,25],"code",{},"frappe.ui.*"," et leur rendu dans l'interface. Utilisez-le pour choisir un composant et copier un exemple avant de développer une page ou un formulaire.",[14,28,29,30,33],{},"La page est réservée au rôle ",[18,31,32],{},"System Manager",".",[35,36,38],"h2",{"id":37},"ouvrir-lexplorateur-de-composants","Ouvrir l'Explorateur de composants",[40,41,42,46,52],"ol",{},[43,44,45],"li",{},"Cliquez sur l'icône de recherche dans la barre latérale gauche, ou appuyez sur Ctrl+K.",[43,47,48,49,33],{},"Tapez ",[23,50,51],{},"Component Explorer",[43,53,54,55,33],{},"Sélectionnez ",[18,56,57],{},"Ouvrir Component Explorer",[14,59,60,61,33],{},"Vous pouvez aussi ouvrir directement l'adresse ",[23,62,63],{},"\u002Fdesk\u002Fcomponent-explorer",[65,66,67,68,67,76],"figure",{},"\n  ",[69,70],"img",{"src":71,"alt":72,"className":73},"\u002Fimages\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fexplorateur-composants-recherche.png","Palette de recherche avec la saisie Component Explorer et le résultat Ouvert Component Explorer",[74,75],"shadow-lg","rounded-lg",[77,78,79],"figcaption",{},"Ouvrir l'Explorateur de composants depuis la recherche.",[35,81,83],{"id":82},"lire-la-page","Lire la page",[40,85,86,93,111,114],{},[43,87,88,89,92],{},"Choisissez un composant dans le champ ",[18,90,91],{},"Composant",", par exemple « Bouton ».",[43,94,95,96,99,100,99,103,106,107,110],{},"La page affiche des groupes d'exemples, par exemple ",[18,97,98],{},"Variantes",", ",[18,101,102],{},"Icônes",[18,104,105],{},"Tailles"," et ",[18,108,109],{},"États"," pour le bouton.",[43,112,113],{},"Dans chaque groupe, le code est à gauche et le rendu est à droite.",[43,115,116,117,120],{},"Certains exemples déclenchent une action, comme une notification : cliquez sur leur bouton ",[18,118,119],{},"Exécuter"," pour voir le résultat.",[65,122,67,123,67,128],{},[69,124],{"src":125,"alt":126,"className":127},"\u002Fimages\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fexplorateur-composants.png","Explorateur de composants : composant Bouton, groupes Variantes, Icons, Sizes et États avec le code à gauche et le rendu à droite",[74,75],[77,129,130],{},"Le composant Bouton dans l'Explorateur de composants.",[35,132,134],{"id":133},"utiliser-un-exemple","Utiliser un exemple",[14,136,137,138,99,141,99,144,99,147,150],{},"Copiez le code d'un exemple dans votre script client ou votre page, puis adaptez les options : ",[23,139,140],{},"label",[23,142,143],{},"variant",[23,145,146],{},"size",[23,148,149],{},"icon","… Le rendu de l'Explorateur montre le résultat attendu pour chaque combinaison d'options.",{"title":152,"searchDepth":153,"depth":154,"links":155},"",1,2,[156,157,158],{"id":37,"depth":154,"text":38},{"id":82,"depth":154,"text":83},{"id":133,"depth":154,"text":134},"L'Explorateur de composants affiche, pour chaque composant d'interface de Dodock, des exemples de code et leur rendu.","md",{"icon":162,"reviewed":163,"last_verified":164,"sources":165},"i-mdi-puzzle-outline",true,"2026-11-03",[166,167,168],"dodock@develop:frappe\u002Fcore\u002Fpage\u002Fcomponent_explorer\u002Fcomponent_explorer.js","dodock@develop:frappe\u002Fcore\u002Fpage\u002Fcomponent_explorer\u002Fcomponent_explorer.json","dodock@develop:frappe\u002Flocale\u002Ffr.po","\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Futiliser_component_explorer",{"title":5,"description":159},"2.next\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Futiliser_component_explorer","yxeTNeuH03IBaTH74_cHqBr3Je6ce5-OoW0Ko6RSNKU",{},1793871741672]