</svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><buttontype="button"class="VPNavBarHamburger hamburger"aria-label="mobile navigation"aria-expanded="false"aria-controls="VPNavScreen"data-v-ccf7ddecdata-v-e5dd9c1c><spanclass="container"data-v-e5dd9c1c><spanclass="top"data-v-e5dd9c1c></span><spanclass="middle"data-v-e5dd9c1c></span><spanclass="bottom"data-v-e5dd9c1c></span></span></button></div></div></div></div><divclass="divider"data-v-ccf7ddec><divclass="divider-line"data-v-ccf7ddec></div></div></div><!----></header><divclass="VPLocalNav empty fixed"data-v-5d98c3a5data-v-a6f0e41e><divclass="container"data-v-a6f0e41e><!----><divclass="VPLocalNavOutlineDropdown"style="--vp-vh:0px;"data-v-a6f0e41edata-v-17a5e62e><buttondata-v-17a5e62e>Return to top</button><!----></div></div></div><!----><divclass="VPContent"id="VPContent"data-v-5d98c3a5data-v-1428d186><divclass="VPDoc has-aside"data-v-1428d186data-v-39a288b8><!--[--><!--]--><divclass="container"data-v-39a288b8><divclass="aside"data-v-39a288b8><divclass="aside-curtain"data-v-39a288b8></div><divclass="aside-container"data-v-39a288b8><divclass="aside-content"data-v-39a288b8><divclass="VPDocAside"data-v-39a288b8data-v-3f215769><!--[--><!--]--><!--[--><!--]--><navaria-labelledby="doc-outline-aria-label"class="VPDocAsideOutline"data-v-3f215769data-v-a5bbad30><divclass="content"data-v-a5bbad30><divclass="outline-marker"data-v-a5bbad30></div><divaria-level="2"class="outline-title"id="doc-outline-aria-label"role="heading"data-v-a5bbad30>On this page</div><ulclass="VPDocOutlineItem root"data-v-a5bbad30data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><divclass="spacer"data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><divclass="content"data-v-39a288b8><divclass="content-container"data-v-39a288b8><!--[--><!--]--><mainclass="main"data-v-39a288b8><divstyle="position:relative;"class="vp-doc _public_gamedevtree_docs_custom-tab-layouts"data-v-39a288b8><div><h1id="custom-tab-layouts"tabindex="-1">Custom tab layouts <aclass="header-anchor"href="#custom-tab-layouts"aria-label="Permalink to "Custom tab layouts""></a></h1><p>Note: If you are using subtabs, tabFormat is used differently, but you still use the same format within each subtabs. <ahref="./subtabs-and-microtabs">See here for more on subtabs</a></p><p>Custom tab layouts can be used to do basically anything in a tab window, especially combined with the "style" layer feature. The tabFormat feature is an array of things, like this:</p><divclass="language-js vp-adaptive-theme"><buttontitle="Copy Code"class="copy"></button><spanclass="lang">js</span><preclass="shiki shiki-themes github-light github-dark vp-code"tabindex="0"><code><spanclass="line"><spanstyle="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> tabFormat</span><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span><spanstyle="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"main-display"</span><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<spanclass="line"><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><spanstyle="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"prestige-button"</span><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><spanstyle="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(){</span><spanstyle="--shiki-light:#D73A49;--shiki-dark:#F97583;">return</span><spanstyle="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Melt your points into "</span><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}],</span></span>
<spanclass="line"><spanstyle="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"milestones"</span><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><spanstyle="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"blank"</span><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><spanstyle="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"blank"</span><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><spanstyle="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"upgrades"</span><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre></div><p>It is a list of components, which can be either just a name, or an array with arguments. If it's an array, the first item is the name of the component, the second is the data passed into it, and the third (optional) applies a CSS style to it with a "CSS object", where the keys are CSS attributes.</p><p>These are the existing components, but you can create more in v.js:</p><ul><li><p>display-text: Displays some text (can use basic HTML). The argument is the text to display. It can also be a function that returns updating text.</p></li><li><p>raw-html: Displays some basic HTML, can also be a function.</p></li><li><p>blank: Adds empty space. The default dimensions are 8px x 17px. The argument changes the dimensions. If it's a single value (e.g. "20px"), that determines the height. If you have a pair of arguments, the first is width and the second is height.</p></li><li><p>row: Display a list of components horizontally. The argument is an array of components in the tab layout format.</p></li><li><p>column: Display a list of components vertically. The argument is an array of components in the tab layout format. This is useful to display columns within a row.</p></li><li><p>main-display: The text that displays the main currency for the layer and its effects.</p></li><li><p>resource-display: The text that displays the currency that this layer is based on, as well as the best and/or total values for this layer's prestige currency (if they are put in startData for this layer)</p></li><li><p>prestige-button: The argument is a string that the prestige button should say before the amount of currency you will gain. It can also be a function that returns updating text.</p></li><li><p>upgrades, milestones, challs, achievements: Display the upgrades, milestones, and challenges for a layer, as appropriate.</p></li><li><p>buyables, clickables: Display all of the buyables/clickables for this layer, as appropriate. The argument optional, and is the size of the boxes in pixels.</p></li><li><p>microtabs: Display a set of subtabs for an area. The argument is the name of the set of microtabs in the "microtabs" feature.</p></li><li><p>bar: Display a bar. The argument is the id of the bar to display.</p></li><li><p>infobox: Display an infobox. The argument is the id of the infobox to display.</p></li><li><p>toggle: A toggle button that toggles a bool value. The data is a pair that identifies what bool to toggle, [layer, id]</p></li></ul><p>The rest of the components are sub-components. They can be used just like other components, but are typically part of another component.</p><ul><li><p>upgrade, milestone, chall, buyable, clickable, achievement: An individual upgrade, challenge, etc. The argument is the id. This can be used if you want to have upgrades split up across multiple subtabs, for example.</p></li><li><p>respec-button, master-button: The respec and master buttons for buyables and clickables, respectively.</p></li><li><p>sell-one, sell-all: The "sell one" and "sell all" for buyables, respectively. The argument is the id of the buyable.</p></li></ul></div></div></main><footerclass="VPDocFooter"data-v-39a288b8data-v-d4a0bba5><!--[--><!--]--><divclass="edit-info"data-v-d4a0bba5><!----><divclass="last-updated"data-v-d4a0bba5><pclass="VPLastUpdated"data-v-d4a0bba5data-v-7e05ebdb>Last updated: <timedatetime="2023-11-28T0
