pages/assets/public_gamedevtree_docs_custom-tab-layouts.md.c0fbc4e0.js

import{_ as s,c as a,o,d as t}from"./app.99998402.js";const h=JSON.parse('{"title":"Custom tab layouts","description":"","frontmatter":{},"headers":[],"relativePath":"public/gamedevtree/docs/custom-tab-layouts.md","lastUpdated":null}'),n={name:"public/gamedevtree/docs/custom-tab-layouts.md"},e=t(`<h1 id="custom-tab-layouts" tabindex="-1">Custom tab layouts <a class="header-anchor" href="#custom-tab-layouts" aria-hidden="true">#</a></h1><p>Note: If you are using subtabs, tabFormat is used differently, but you still use the same format within each subtabs. <a href="./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 &quot;style&quot; layer feature. The tabFormat feature is an array of things, like this:</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#FFCB6B;">tabFormat</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">main-display</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">            [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">prestige-button</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#89DDFF;">(){</span><span style="color:#89DDFF;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Melt your points into </span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">blank</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">            [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">display-text</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#C792EA;">function</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#89DDFF;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">I have </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">format</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">player</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">points</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;"> pointy points!</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">{</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">color</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">red</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">font-size</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">32px</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">font-family</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Comic Sans MS</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">blank</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">            [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">toggle</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">c</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">beep</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">milestones</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">blank</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">blank</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">upgrades</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"></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&#39;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 &quot;CSS object&quot;, 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&#39;s a single value (e.g. &quot;20px&quot;), 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&#39;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 &quot;microtabs&quot; 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 &quot;sell one&quot; and &quot;sell all&quot; for buyables, respectively. The argument is the id of the buyable.</p></li></ul>`,9),l=[e];function p(r,c,i,y,D,u){return o(),a("div",null,l)}const b=s(n,[["render",p]]);export{h as __pageData,b as default};