<divid="app"><divclass="Layout"data-v-5d98c3a5><!--[--><!--]--><!--[--><spantabindex="-1"data-v-0f60ec36></span><ahref="#VPContent"class="VPSkipLink visually-hidden"data-v-0f60ec36> Skip to content </a><!--]--><!----><headerclass="VPNav"data-v-5d98c3a5data-v-ae24b3ad><divclass="VPNavBar top"data-v-ae24b3addata-v-ccf7ddec><divclass="wrapper"data-v-ccf7ddec><divclass="container"data-v-ccf7ddec><divclass="title"data-v-ccf7ddec><divclass="VPNavBarTitle"data-v-ccf7ddecdata-v-ab179fa1><aclass="title"href="/"data-v-ab179fa1><!--[--><!--]--><!----><spandata-v-ab179fa1>The Paper Pilot</span><!--[--><!--]--></a></div></div><divclass="content"data-v-ccf7ddec><divclass="content-body"data-v-ccf7ddec><!--[--><!--]--><divclass="VPNavBarSearch search"data-v-ccf7ddec><!----></div><navaria-labelledby="main-nav-aria-label"class="VPNavBarMenu menu"data-v-ccf7ddecdata-v-7f418b0f><spanid="main-nav-aria-label"class="visually-hidden"data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><aclass="VPLink link VPNavBarMenuLink"href="/guide-to-incrementals/"tabindex="0"data-v-7f418b0fdata-v-9c663999><!--[--><spandata-v-9c663999>Guide to Incrementals</span><!--]--></a><!--]--><!--[--><aclass="VPLink link VPNavBarMenuLink"href="/projects/"tabindex="0"data-v-7f418b0fdata-v-9c663999><!--[--><spandata-v-9c663999>Projects</span><!--]--></a><!--]--><!--[--><aclass="VPLink link vp-external-link-icon VPNavBarMenuLink"href="https://moddingtree.com"target="_blank"rel="noreferrer"tabindex="0"data-v-7f418b0fdata-v-9c663999><!--[--><spandata-v-9c663999>Profectus</span><!--]--></a><!--]--><!--]--></nav><!----><divclass="VPNavBarAppearance appearance"data-v-ccf7ddecdata-v-e6aabb21><buttonclass="VPSwitch VPSwitchAppearance"type="button"role="switch"title="Switch to dark theme"aria-checked="false"data-v-e6aabb21data-v-d1f28634data-v-1d5665e3><spanclass="check"data-v-1d5665e3><spanclass="icon"data-v-1d5665e3><!--[--><spanclass="vpi-sun sun"data-v-d1f28634></span><spanclass="vpi-moon moon"data-v-d1f28634></span><!--]--></span></span></button></div><divclass="VPSocialLinks VPNavBarSocialLinks social-links"data-v-ccf7ddecdata-v-0394ad82data-v-7bc22406><!--[--><aclass="VPSocialLink no-icon"href="https://github.com/thepaperpilot"aria-label="github"target="_blank"rel="noopener"data-v-7bc22406data-v-eee4e7cb><spanclass="vpi-social-github"/></a><aclass="VPSocialLink no-icon"href="https://www.linkedin.com/pub/anthony-lawn/a9/a98/2"aria-label="linkedin"target="_blank"rel="noopener"data-v-7bc22406data-v-eee4e7cb><spanclass="vpi-social-linkedin"/></a><aclass="VPSocialLink no-icon"href="https://discord.gg/yJ4fjnjU54"aria-label="discord"target="_blank"rel="noopener"data-v-7bc22406data-v-eee4e7cb><spanclass="vpi-social-discord"/></a><aclass="VPSocialLink no-icon"href="https://mastodon.gamedev.place/@thepaperpilot"aria-labeltarget="_blank"rel="noopener"data-v-7bc22406data-v-eee4e7cb><svgxmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="currentColor"class="bi bi-mastodon"viewBox="0 0 16 16">
</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_lit_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, <code>tabFormat</code> 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 <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 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></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:#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 <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.</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>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 data is a pair that identifies what bool to toggle, e.g. <code>[layer, id]</code></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, challenge, 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-28T02:07:43.000Z"data-v-7e05ebdb></time></p></div></div><
