</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-a0fd61f4data-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><!----></header><divclass="VPLocalNav fixed reached-top"data-v-5a346dfedata-v-79c8c1df><!----><divclass="VPLocalNavOutlineDropdown"style="--vp-vh:0px;"data-v-79c8c1dfdata-v-1c15a60a><buttondata-v-1c15a60a>Return to top</button><!----></div></div><!----><divclass="VPContent"id="VPContent"data-v-5a346dfedata-v-669faec9><divclass="VPDoc has-aside"data-v-669faec9data-v-6b87e69f><!--[--><!--]--><divclass="container"data-v-6b87e69f><divclass="aside"data-v-6b87e69f><divclass="aside-curtain"data-v-6b87e69f></div><divclass="aside-container"data-v-6b87e69f><divclass="aside-content"data-v-6b87e69f><divclass="VPDocAside"data-v-6b87e69fdata-v-3f215769><!--[--><!--]--><!--[--><!--]--><divclass="VPDocAsideOutline"role="navigation"data-v-3f215769data-v-d330b1bb><divclass="content"data-v-d330b1bb><divclass="outline-marker"data-v-d330b1bb></div><divclass="outline-title"role="heading"aria-level="2"data-v-d330b1bb>On this page</div><navaria-labelledby="doc-outline-aria-label"data-v-d330b1bb><spanclass="visually-hidden"id="doc-outline-aria-label"data-v-d330b1bb> Table of Contents for current page </span><ulclass="root"data-v-d330b1bbdata-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><divclass="spacer"data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><divclass="content"data-v-6b87e69f><divclass="content-container"data-v-6b87e69f><!--[--><!--]--><!----><mainclass="main"data-v-6b87e69f><divstyle="position:relative;"class="vp-doc _public_kronos_docs_custom-tab-layouts"data-v-6b87e69f><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, <code>tabFormat</code> is used differently, but the same format is used for defining their layouts. <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 <code>tabFormat</code> 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 github-dark vp-code-dark"><code><spanclass="line"><spanstyle="color:#B392F0;">tabFormat</span><spanstyle="color:#E1E4E8;">: [</span></span>
<spanclass="line"><spanstyle="color:#E1E4E8;"> [</span><spanstyle="color:#9ECBFF;">"prestige-button"</span><spanstyle="color:#E1E4E8;">, </span><spanstyle="color:#F97583;">function</span><spanstyle="color:#E1E4E8;">() { </span><spanstyle="color:#F97583;">return</span><spanstyle="color:#E1E4E8;"></span><spanstyle="color:#9ECBFF;">"Melt your points into "</span><spanstyle="color:#E1E4E8;"> }],</span></span>
<spanclass="line"><spanstyle="color:#24292E;"> [</span><spanstyle="color:#032F62;">"prestige-button"</span><spanstyle="color:#24292E;">, </span><spanstyle="color:#D73A49;">function</span><spanstyle="color:#24292E;">() { </span><spanstyle="color:#D73A49;">return</span><spanstyle="color:#24292E;"></span><spanstyle="color:#032F62;">"Melt your points into "</span><spanstyle="color:#24292E;"> }],</span></span>
<spanclass="line"><spanstyle="color:#24292E;">]</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 <ahref="/js/components.js">components.js</a>:</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. The argument is the amount of precision to use, allowing it to display non-whole numbers.</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 <code>startData</code> 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>text-input: A text input box. The argument is the name of the variable in player[layer] that the input is for, player[layer][argument] (Works with strings, numbers, and Decimals!)</p></li><li><p>slider: Lets the user input a value with a slider. The argument a 3-element array: [name, min, max]. The name is the name of the variable in player[layer] that the input that the input is for, and min and max are the limits of the slider. (Does not work for Decimal values)</p></li><li><p>upgrades: The layer's upgrades. The argument is optional, and is a the list of rows this component should include, if it doesn't have all of them.</p></li><li><p>milestones, challenges, 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 is 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>tree: Displays a tree. The argument is an array of arrays containing the names of the nodes in the tree (first by row, then by column) <ahref="./trees-and-tree-customization">See here for more information on tree layouts and nodes!</a></p></li><li><p>toggle: A toggle button that toggles a bool value. The argument is a pair that identifies the location in player of the bool to toggle, e.g. <code>[layer, id]</code>. 'layer' also affects the color of the toggle.</p></li><li><p>grid: Displays the gridable grid for the layer. If you need more than one grid, use a layer proxy.</p></li><li><p>layer-proxy: Lets you use components from another layer. The argument is a pair, <code>[layer, data]</code>, consisting of the id of the layer to proxy from, and the tabFormat for the components to show. (Note: you cannot use a microtab within a la
