[{"data":1,"prerenderedAt":556},["ShallowReactive",2],{"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fpersonnalisation_des_onglets":3,"section:\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fpersonnalisation_des_onglets":555},{"id":4,"title":5,"body":6,"description":540,"extension":541,"meta":542,"navigation":544,"path":551,"seo":552,"stem":553,"__hash__":554},"docs\u002F2.next\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Fpersonnalisation_des_onglets.md","Personnalisation des onglets dans les formulaires",{"type":7,"value":8,"toc":535},"minimark",[9,13,33,38,43,90,103,106,110,113,170,173,339,349,353,400,412,521,531],[10,11,5],"h1",{"id":12},"personnalisation-des-onglets-dans-les-formulaires",[14,15,16,17,22,23,27,28,32],"p",{},"Cette page concerne les formulaires Vue construits avec ",[18,19,21],"a",{"href":20},"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fform-layout","FormLayout",". Pour les onglets des formulaires du desk, utilisez les propriétés du DocType ou ",[24,25,26],"code",{},"frm.set_df_property"," sur le champ ",[29,30,31],"strong",{},"Saut d'onglet",".",[34,35,37],"h2",{"id":36},"identité-dun-onglet","Identité d'un onglet",[14,39,40,42],{},[24,41,21],{}," désigne chaque onglet par une identité stable, pas par sa position :",[44,45,46,54,80],"ol",{},[47,48,49,50,53],"li",{},"le ",[24,51,52],{},"name"," de l'onglet, s'il existe ;",[47,55,56,57,60,61,64,65,68,69,72,73,68,76,79],{},"sinon, le libellé en minuscules, où chaque suite de caractères autres que ",[24,58,59],{},"a-z"," et ",[24,62,63],{},"0-9"," devient un tiret (",[24,66,67],{},"Comptabilité"," donne ",[24,70,71],{},"comptabilit",", ",[24,74,75],{},"Détails",[24,77,78],{},"d-tails",") ;",[47,81,82,83,72,86,89],{},"sinon, la position (",[24,84,85],{},"tab-1",[24,87,88],{},"tab-2","…).",[14,91,92,93,72,96,99,100,102],{},"Deux onglets avec la même identité reçoivent un suffixe : ",[24,94,95],{},"details",[24,97,98],{},"details-2",". Les caractères accentués donnent des identités peu lisibles : donnez un ",[24,101,52],{}," à vos onglets. L'identité ne change pas si un onglet voisin apparaît ou disparaît, ni si vous changez le libellé avec une surcharge.",[14,104,105],{},"Avec plusieurs onglets visibles, un onglet sans libellé s'affiche « Details ».",[34,107,109],{"id":108},"masquer-ou-renommer-un-onglet","Masquer ou renommer un onglet",[14,111,112],{},"Un onglet accepte trois moyens de contrôle, appliqués dans cet ordre :",[114,115,116,129],"table",{},[117,118,119],"thead",{},[120,121,122,126],"tr",{},[123,124,125],"th",{},"Clé",[123,127,128],{},"Rôle",[130,131,132,143,155],"tbody",{},[120,133,134,140],{},[135,136,137],"td",{},[24,138,139],{},"hidden",[135,141,142],{},"Masquage fixe.",[120,144,145,150],{},[135,146,147],{},[24,148,149],{},"dependsOn",[135,151,152,153,32],{},"Condition évaluée à chaque modification du document. Elle remplace ",[24,154,139],{},[120,156,157,162],{},[135,158,159],{},[24,160,161],{},"override",[135,163,164,167,168,32],{},[24,165,166],{},"{ hidden?, label? }",". Dernier mot pour ce rendu : la surcharge passe avant ",[24,169,149],{},[14,171,172],{},"Exemple fictif : masquer l'onglet des paiements quand le client n'a pas d'encours.",[174,175,180],"pre",{"className":176,"code":177,"language":178,"meta":179,"style":179},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const layout = computed(() =>\n    baseLayout.map((tab) =>\n        tab.name === \"paiements\"\n            ? { ...tab, override: { hidden: doc.value.outstanding_amount === 0 } }\n            : tab\n    )\n);\n","js","",[24,181,182,212,236,260,316,325,331],{"__ignoreMap":179},[183,184,187,191,195,199,203,206,209],"span",{"class":185,"line":186},"line",1,[183,188,190],{"class":189},"spNyl","const",[183,192,194],{"class":193},"sTEyZ"," layout ",[183,196,198],{"class":197},"sMK4o","=",[183,200,202],{"class":201},"s2Zo4"," computed",[183,204,205],{"class":193},"(",[183,207,208],{"class":197},"()",[183,210,211],{"class":189}," =>\n",[183,213,215,218,220,223,225,227,231,234],{"class":185,"line":214},2,[183,216,217],{"class":193},"    baseLayout",[183,219,32],{"class":197},[183,221,222],{"class":201},"map",[183,224,205],{"class":193},[183,226,205],{"class":197},[183,228,230],{"class":229},"sHdIc","tab",[183,232,233],{"class":197},")",[183,235,211],{"class":189},[183,237,239,242,244,247,250,253,257],{"class":185,"line":238},3,[183,240,241],{"class":193},"        tab",[183,243,32],{"class":197},[183,245,246],{"class":193},"name ",[183,248,249],{"class":197},"===",[183,251,252],{"class":197}," \"",[183,254,256],{"class":255},"sfazB","paiements",[183,258,259],{"class":197},"\"\n",[183,261,263,266,269,272,274,277,281,284,286,289,291,294,296,299,301,304,306,310,313],{"class":185,"line":262},4,[183,264,265],{"class":197},"            ?",[183,267,268],{"class":197}," {",[183,270,271],{"class":197}," ...",[183,273,230],{"class":193},[183,275,276],{"class":197},",",[183,278,280],{"class":279},"swJcz"," override",[183,282,283],{"class":197},":",[183,285,268],{"class":197},[183,287,288],{"class":279}," hidden",[183,290,283],{"class":197},[183,292,293],{"class":193}," doc",[183,295,32],{"class":197},[183,297,298],{"class":193},"value",[183,300,32],{"class":197},[183,302,303],{"class":193},"outstanding_amount ",[183,305,249],{"class":197},[183,307,309],{"class":308},"sbssI"," 0",[183,311,312],{"class":197}," }",[183,314,315],{"class":197}," }\n",[183,317,319,322],{"class":185,"line":318},5,[183,320,321],{"class":197},"            :",[183,323,324],{"class":193}," tab\n",[183,326,328],{"class":185,"line":327},6,[183,329,330],{"class":193},"    )\n",[183,332,334,336],{"class":185,"line":333},7,[183,335,233],{"class":193},[183,337,338],{"class":197},";\n",[14,340,341,342,345,346,348],{},"Une surcharge ",[24,343,344],{},"{ hidden: false }"," affiche un onglet que ",[24,347,149],{}," masquerait.",[34,350,352],{"id":351},"suivre-longlet-affiché","Suivre l'onglet affiché",[114,354,355,368],{},[117,356,357],{},[120,358,359,362,365],{},[123,360,361],{},"Nom",[123,363,364],{},"Sens",[123,366,367],{},"Contenu",[130,369,370,385],{},[120,371,372,377,382],{},[135,373,374],{},[24,375,376],{},"v-model:tab",[135,378,379,380],{},"Votre code ↔ ",[24,381,21],{},[135,383,384],{},"Onglet choisi par l'utilisateur (identité).",[120,386,387,392,397],{},[135,388,389],{},[24,390,391],{},"@update:activeTab",[135,393,394,396],{},[24,395,21],{}," → votre code",[135,398,399],{},"Onglet réellement affiché. Émis au montage et à chaque changement.",[14,401,402,403,405,406,408,409,411],{},"Si l'onglet choisi est masqué, ",[24,404,21],{}," affiche le premier onglet visible. La valeur de ",[24,407,376],{}," ne change pas. Quand l'onglet choisi redevient visible, ",[24,410,21],{}," y revient.",[174,413,417],{"className":414,"code":415,"language":416,"meta":179,"style":179},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CFormLayout\n    :layout=\"layout\"\n    v-model:doc=\"doc\"\n    v-model:tab=\"ongletChoisi\"\n    @update:activeTab=\"(id) => (ongletAffiche = id)\"\n\u002F>\n","vue",[24,418,419,427,444,462,479,516],{"__ignoreMap":179},[183,420,421,424],{"class":185,"line":186},[183,422,423],{"class":197},"\u003C",[183,425,426],{"class":279},"FormLayout\n",[183,428,429,432,435,437,440,442],{"class":185,"line":214},[183,430,431],{"class":197},"    :",[183,433,434],{"class":189},"layout",[183,436,198],{"class":197},[183,438,439],{"class":197},"\"",[183,441,434],{"class":193},[183,443,259],{"class":197},[183,445,446,449,451,454,456,458,460],{"class":185,"line":238},[183,447,448],{"class":189},"    v-model",[183,450,283],{"class":197},[183,452,453],{"class":189},"doc",[183,455,198],{"class":197},[183,457,439],{"class":197},[183,459,453],{"class":193},[183,461,259],{"class":197},[183,463,464,466,468,470,472,474,477],{"class":185,"line":262},[183,465,448],{"class":189},[183,467,283],{"class":197},[183,469,230],{"class":189},[183,471,198],{"class":197},[183,473,439],{"class":197},[183,475,476],{"class":193},"ongletChoisi",[183,478,259],{"class":197},[183,480,481,484,487,489,492,494,496,498,501,503,506,509,511,514],{"class":185,"line":318},[183,482,483],{"class":197},"    @",[183,485,486],{"class":189},"update",[183,488,283],{"class":197},[183,490,491],{"class":189},"activeTab",[183,493,198],{"class":197},[183,495,439],{"class":197},[183,497,205],{"class":197},[183,499,500],{"class":229},"id",[183,502,233],{"class":197},[183,504,505],{"class":189}," =>",[183,507,508],{"class":193}," (ongletAffiche ",[183,510,198],{"class":197},[183,512,513],{"class":193}," id)",[183,515,259],{"class":197},[183,517,518],{"class":185,"line":327},[183,519,520],{"class":193},"\u002F>\n",[14,522,523,524,526,527,530],{},"Gardez ",[24,525,476],{}," dans un ",[24,528,529],{},"ref"," du composant parent pour que l'utilisateur retrouve son onglet après un rechargement du formulaire, par exemple après un enregistrement.",[532,533,534],"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 .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 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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":179,"searchDepth":186,"depth":214,"links":536},[537,538,539],{"id":36,"depth":214,"text":37},{"id":108,"depth":214,"text":109},{"id":351,"depth":214,"text":352},"Masquer ou renommer un onglet d'un formulaire FormLayout pour un rendu, et suivre l'onglet réellement affiché.","md",{"icon":543,"reviewed":544,"last_verified":545,"sources":546},"i-mdi-tab",true,"2026-11-04",[547,548,549,550],"dodock@develop:ui\u002Fsrc\u002Fcomponents\u002FFormLayout\u002FFormLayout.vue","dodock@develop:ui\u002Fsrc\u002Fcomponents\u002FFormLayout\u002Ftypes.ts","dodock@develop:ui\u002Fsrc\u002Fcomponents\u002FFormLayout\u002FtabIdentity.ts","dodock@develop:ui\u002Fsrc\u002Fcomponents\u002FFormLayout\u002FresolveLayout.ts","\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fpersonnalisation_des_onglets",{"title":5,"description":540},"2.next\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Fpersonnalisation_des_onglets","WD2FHRI1mYGfcvWeVScXMGiStom9V4vAybYNPXZ_AEw",{},1793871740115]