[{"data":1,"prerenderedAt":772},["ShallowReactive",2],{"\u002Fv5\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fpersonnalisation_onglets_formulaires":3,"section:\u002Fv5\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fpersonnalisation_onglets_formulaires":771},{"id":4,"title":5,"body":6,"description":758,"extension":759,"meta":760,"navigation":291,"path":767,"seo":768,"stem":769,"__hash__":770},"docs\u002F1.v5\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Fpersonnalisation_onglets_formulaires.md","Personnalisation des onglets dans les formulaires",{"type":7,"value":8,"toc":751},"minimark",[9,13,30,44,51,112,134,138,141,169,186,189,193,196,690,694,699,738,747],[10,11,5],"h1",{"id":12},"personnalisation-des-onglets-dans-les-formulaires",[14,15,16,17,21,22,25,26,29],"p",{},"Cette page concerne le composant Vue ",[18,19,20],"code",{},"FormLayout"," du paquet ",[18,23,24],{},"@framework\u002Fui",", utilisé par les applications Vue (pages en Vue, boîtes de dialogue). Elle ne concerne pas les formulaires classiques du bureau (",[18,27,28],{},"frappe.ui.form",").",[14,31,32,33,35,36,39,40,43],{},"Dans le schéma passé à ",[18,34,20],{},", chaque onglet accepte une propriété ",[18,37,38],{},"override",". Elle masque ou renomme l'onglet à chaque rendu. Le composant annonce aussi l'onglet affiché avec l'événement ",[18,41,42],{},"update:activeTab",".",[45,46,48,49],"h2",{"id":47},"la-propriété-override","La propriété ",[18,50,38],{},[52,53,58],"pre",{"className":54,"code":55,"language":56,"meta":57,"style":57},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","interface TabOverride {\n  hidden?: boolean;\n  label?: string;\n}\n","ts","",[18,59,60,77,93,106],{"__ignoreMap":57},[61,62,65,69,73],"span",{"class":63,"line":64},"line",1,[61,66,68],{"class":67},"spNyl","interface",[61,70,72],{"class":71},"sBMFI"," TabOverride",[61,74,76],{"class":75},"sMK4o"," {\n",[61,78,80,84,87,90],{"class":63,"line":79},2,[61,81,83],{"class":82},"swJcz","  hidden",[61,85,86],{"class":75},"?:",[61,88,89],{"class":71}," boolean",[61,91,92],{"class":75},";\n",[61,94,96,99,101,104],{"class":63,"line":95},3,[61,97,98],{"class":82},"  label",[61,100,86],{"class":75},[61,102,103],{"class":71}," string",[61,105,92],{"class":75},[61,107,109],{"class":63,"line":108},4,[61,110,111],{"class":75},"}\n",[14,113,114,116,117,119,120,123,124,126,127,130,131,133],{},[18,115,20],{}," applique ",[18,118,38],{}," après les conditions ",[18,121,122],{},"dependsOn"," de l'onglet. Un ",[18,125,38],{}," a donc le dernier mot : ",[18,128,129],{},"hidden: false"," affiche un onglet que son ",[18,132,122],{}," masquerait.",[45,135,137],{"id":136},"identité-dun-onglet","Identité d'un onglet",[14,139,140],{},"Le composant repère chaque onglet par une identité stable, pas par sa position :",[142,143,144,152,163],"ol",{},[145,146,147,148,151],"li",{},"le ",[18,149,150],{},"name"," de l'onglet, s'il existe ;",[145,153,154,155,158,159,162],{},"sinon, le libellé en minuscules, avec des tirets (",[18,156,157],{},"Comptabilité"," devient ",[18,160,161],{},"comptabilit",", car les caractères accentués sont remplacés) ;",[145,164,165,166,43],{},"sinon, ",[18,167,168],{},"tab-\u003Cposition>",[14,170,171,172,175,176,179,180,182,183,43],{},"Si deux onglets ont la même identité, le composant ajoute ",[18,173,174],{},"-2",", ",[18,177,178],{},"-3","… Donnez un ",[18,181,150],{}," à vos onglets : l'identité ne change pas si vous renommez l'onglet avec ",[18,184,185],{},"override.label",[14,187,188],{},"Un onglet sans libellé s'affiche « Details » quand le formulaire a plusieurs onglets.",[45,190,192],{"id":191},"exemple","Exemple",[14,194,195],{},"Exemple fictif : un formulaire Vue de client masque l'onglet « Comptabilité » pour un particulier et renomme l'onglet principal.",[52,197,201],{"className":198,"code":199,"language":200,"meta":57,"style":57},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { FormLayout } from \"@framework\u002Fui\u002FFormLayout\";\n\nconst doc = ref({ customer_type: \"Individual\", customer_name: \"Claire Martin\" });\nconst activeTab = ref(\"\");\n\nconst layout = computed(() => [\n  {\n    name: \"details\",\n    label: \"Détails\",\n    override: { label: \"Informations principales\" },\n    sections: [\u002F* … *\u002F],\n  },\n  {\n    name: \"accounting\",\n    label: \"Comptabilité\",\n    override: { hidden: doc.value.customer_type === \"Individual\" },\n    sections: [\u002F* … *\u002F],\n  },\n]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CFormLayout v-model:doc=\"doc\" :layout=\"layout\" @update:activeTab=\"activeTab = $event\" \u002F>\n\u003C\u002Ftemplate>\n","vue",[18,202,203,231,265,287,293,347,368,373,396,402,420,437,462,482,488,493,509,524,562,577,582,590,600,605,615,681],{"__ignoreMap":57},[61,204,205,208,211,214,217,220,223,226,228],{"class":63,"line":64},[61,206,207],{"class":75},"\u003C",[61,209,210],{"class":82},"script",[61,212,213],{"class":67}," setup",[61,215,216],{"class":67}," lang",[61,218,219],{"class":75},"=",[61,221,222],{"class":75},"\"",[61,224,56],{"class":225},"sfazB",[61,227,222],{"class":75},[61,229,230],{"class":75},">\n",[61,232,233,237,240,244,247,250,253,256,259,261,263],{"class":63,"line":79},[61,234,236],{"class":235},"s7zQu","import",[61,238,239],{"class":75}," {",[61,241,243],{"class":242},"sTEyZ"," computed",[61,245,246],{"class":75},",",[61,248,249],{"class":242}," ref",[61,251,252],{"class":75}," }",[61,254,255],{"class":235}," from",[61,257,258],{"class":75}," \"",[61,260,200],{"class":225},[61,262,222],{"class":75},[61,264,92],{"class":75},[61,266,267,269,271,274,276,278,280,283,285],{"class":63,"line":95},[61,268,236],{"class":235},[61,270,239],{"class":75},[61,272,273],{"class":242}," FormLayout",[61,275,252],{"class":75},[61,277,255],{"class":235},[61,279,258],{"class":75},[61,281,282],{"class":225},"@framework\u002Fui\u002FFormLayout",[61,284,222],{"class":75},[61,286,92],{"class":75},[61,288,289],{"class":63,"line":108},[61,290,292],{"emptyLinePlaceholder":291},true,"\n",[61,294,296,299,302,304,307,310,313,316,319,321,324,326,328,331,333,335,338,340,342,345],{"class":63,"line":295},5,[61,297,298],{"class":67},"const",[61,300,301],{"class":242}," doc ",[61,303,219],{"class":75},[61,305,249],{"class":306},"s2Zo4",[61,308,309],{"class":242},"(",[61,311,312],{"class":75},"{",[61,314,315],{"class":82}," customer_type",[61,317,318],{"class":75},":",[61,320,258],{"class":75},[61,322,323],{"class":225},"Individual",[61,325,222],{"class":75},[61,327,246],{"class":75},[61,329,330],{"class":82}," customer_name",[61,332,318],{"class":75},[61,334,258],{"class":75},[61,336,337],{"class":225},"Claire Martin",[61,339,222],{"class":75},[61,341,252],{"class":75},[61,343,344],{"class":242},")",[61,346,92],{"class":75},[61,348,350,352,355,357,359,361,364,366],{"class":63,"line":349},6,[61,351,298],{"class":67},[61,353,354],{"class":242}," activeTab ",[61,356,219],{"class":75},[61,358,249],{"class":306},[61,360,309],{"class":242},[61,362,363],{"class":75},"\"\"",[61,365,344],{"class":242},[61,367,92],{"class":75},[61,369,371],{"class":63,"line":370},7,[61,372,292],{"emptyLinePlaceholder":291},[61,374,376,378,381,383,385,387,390,393],{"class":63,"line":375},8,[61,377,298],{"class":67},[61,379,380],{"class":242}," layout ",[61,382,219],{"class":75},[61,384,243],{"class":306},[61,386,309],{"class":242},[61,388,389],{"class":75},"()",[61,391,392],{"class":67}," =>",[61,394,395],{"class":242}," [\n",[61,397,399],{"class":63,"line":398},9,[61,400,401],{"class":75},"  {\n",[61,403,405,408,410,412,415,417],{"class":63,"line":404},10,[61,406,407],{"class":82},"    name",[61,409,318],{"class":75},[61,411,258],{"class":75},[61,413,414],{"class":225},"details",[61,416,222],{"class":75},[61,418,419],{"class":75},",\n",[61,421,423,426,428,430,433,435],{"class":63,"line":422},11,[61,424,425],{"class":82},"    label",[61,427,318],{"class":75},[61,429,258],{"class":75},[61,431,432],{"class":225},"Détails",[61,434,222],{"class":75},[61,436,419],{"class":75},[61,438,440,443,445,447,450,452,454,457,459],{"class":63,"line":439},12,[61,441,442],{"class":82},"    override",[61,444,318],{"class":75},[61,446,239],{"class":75},[61,448,449],{"class":82}," label",[61,451,318],{"class":75},[61,453,258],{"class":75},[61,455,456],{"class":225},"Informations principales",[61,458,222],{"class":75},[61,460,461],{"class":75}," },\n",[61,463,465,468,470,473,477,480],{"class":63,"line":464},13,[61,466,467],{"class":82},"    sections",[61,469,318],{"class":75},[61,471,472],{"class":242}," [",[61,474,476],{"class":475},"sHwdD","\u002F* … *\u002F",[61,478,479],{"class":242},"]",[61,481,419],{"class":75},[61,483,485],{"class":63,"line":484},14,[61,486,487],{"class":75},"  },\n",[61,489,491],{"class":63,"line":490},15,[61,492,401],{"class":75},[61,494,496,498,500,502,505,507],{"class":63,"line":495},16,[61,497,407],{"class":82},[61,499,318],{"class":75},[61,501,258],{"class":75},[61,503,504],{"class":225},"accounting",[61,506,222],{"class":75},[61,508,419],{"class":75},[61,510,512,514,516,518,520,522],{"class":63,"line":511},17,[61,513,425],{"class":82},[61,515,318],{"class":75},[61,517,258],{"class":75},[61,519,157],{"class":225},[61,521,222],{"class":75},[61,523,419],{"class":75},[61,525,527,529,531,533,536,538,541,543,546,548,551,554,556,558,560],{"class":63,"line":526},18,[61,528,442],{"class":82},[61,530,318],{"class":75},[61,532,239],{"class":75},[61,534,535],{"class":82}," hidden",[61,537,318],{"class":75},[61,539,540],{"class":242}," doc",[61,542,43],{"class":75},[61,544,545],{"class":242},"value",[61,547,43],{"class":75},[61,549,550],{"class":242},"customer_type ",[61,552,553],{"class":75},"===",[61,555,258],{"class":75},[61,557,323],{"class":225},[61,559,222],{"class":75},[61,561,461],{"class":75},[61,563,565,567,569,571,573,575],{"class":63,"line":564},19,[61,566,467],{"class":82},[61,568,318],{"class":75},[61,570,472],{"class":242},[61,572,476],{"class":475},[61,574,479],{"class":242},[61,576,419],{"class":75},[61,578,580],{"class":63,"line":579},20,[61,581,487],{"class":75},[61,583,585,588],{"class":63,"line":584},21,[61,586,587],{"class":242},"])",[61,589,92],{"class":75},[61,591,593,596,598],{"class":63,"line":592},22,[61,594,595],{"class":75},"\u003C\u002F",[61,597,210],{"class":82},[61,599,230],{"class":75},[61,601,603],{"class":63,"line":602},23,[61,604,292],{"emptyLinePlaceholder":291},[61,606,608,610,613],{"class":63,"line":607},24,[61,609,207],{"class":75},[61,611,612],{"class":82},"template",[61,614,230],{"class":75},[61,616,618,621,623,626,628,631,633,635,637,639,642,645,647,649,651,653,656,659,661,664,666,668,670,673,676,678],{"class":63,"line":617},25,[61,619,620],{"class":75},"  \u003C",[61,622,20],{"class":82},[61,624,625],{"class":67}," v-model",[61,627,318],{"class":75},[61,629,630],{"class":67},"doc",[61,632,219],{"class":75},[61,634,222],{"class":75},[61,636,630],{"class":242},[61,638,222],{"class":75},[61,640,641],{"class":75}," :",[61,643,644],{"class":67},"layout",[61,646,219],{"class":75},[61,648,222],{"class":75},[61,650,644],{"class":242},[61,652,222],{"class":75},[61,654,655],{"class":75}," @",[61,657,658],{"class":67},"update",[61,660,318],{"class":75},[61,662,663],{"class":67},"activeTab",[61,665,219],{"class":75},[61,667,222],{"class":75},[61,669,663],{"class":242},[61,671,672],{"class":75}," = ",[61,674,675],{"class":242},"$event",[61,677,222],{"class":75},[61,679,680],{"class":75}," \u002F>\n",[61,682,684,686,688],{"class":63,"line":683},26,[61,685,595],{"class":75},[61,687,612],{"class":82},[61,689,230],{"class":75},[45,691,693],{"id":692},"onglet-choisi-et-onglet-affiché","Onglet choisi et onglet affiché",[14,695,696,698],{},[18,697,20],{}," a deux canaux :",[700,701,702,715],"table",{},[703,704,705],"thead",{},[706,707,708,712],"tr",{},[709,710,711],"th",{},"Canal",[709,713,714],{},"Rôle",[716,717,718,729],"tbody",{},[706,719,720,726],{},[721,722,723],"td",{},[18,724,725],{},"v-model:tab",[721,727,728],{},"L'onglet que l'utilisateur a choisi (identité). Seul l'utilisateur ou votre code l'écrit",[706,730,731,735],{},[721,732,733],{},[18,734,42],{},[721,736,737],{},"L'onglet réellement affiché. Émis au montage, puis à chaque changement",[14,739,740,741,743,744,746],{},"Si l'onglet choisi disparaît (masqué par ",[18,742,122],{}," ou ",[18,745,38],{},"), le composant affiche le premier onglet visible. Quand l'onglet revient, le composant y retourne.",[748,749,750],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":57,"searchDepth":64,"depth":79,"links":752},[753,755,756,757],{"id":47,"depth":79,"text":754},"La propriété override",{"id":136,"depth":79,"text":137},{"id":191,"depth":79,"text":192},{"id":692,"depth":79,"text":693},"Masquer ou renommer un onglet du composant FormLayout de @framework\u002Fui avec la propriété override, et suivre l'onglet affiché avec update:activeTab.","md",{"icon":761,"order":108,"reviewed":291,"last_verified":762,"sources":763},"i-mdi-tab","2026-11-04",[764,765,766],"dodock@v5:ui\u002Fsrc\u002Fcomponents\u002FFormLayout\u002FFormLayout.vue","dodock@v5:ui\u002Fsrc\u002Fcomponents\u002FFormLayout\u002Ftypes.ts","dodock@v5:ui\u002Fsrc\u002Fcomponents\u002FFormLayout\u002FtabIdentity.ts","\u002Fv5\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fpersonnalisation_onglets_formulaires",{"title":5,"description":758},"1.v5\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Fpersonnalisation_onglets_formulaires","Dlza93ehgYJcfTwy1t3nTZJLoaF0KUat-kmntMKyFcQ",{},1794226464560]