<divid="app"><divclass="Layout"data-v-f44a984a><!--[--><!--]--><!--[--><spantabindex="-1"data-v-151f2593></span><ahref="#VPContent"class="VPSkipLink visually-hidden"data-v-151f2593> Skip to content </a><!--]--><!----><headerclass="VPNav no-sidebar"data-v-f44a984adata-v-a50780ff><divclass="VPNavBar"data-v-a50780ffdata-v-6f1d18b5><divclass="container"data-v-6f1d18b5><divclass="VPNavBarTitle"data-v-6f1d18b5data-v-d5925166><aclass="title"href="/"data-v-d5925166><!--[--><!--]--><!----><!--[-->The Paper Pilot<!--]--><!--[--><!--]--></a></div><divclass="content"data-v-6f1d18b5><!--[--><!--]--><!----><navaria-labelledby="main-nav-aria-label"class="VPNavBarMenu menu"data-v-6f1d18b5data-v-f83db6ba><spanid="main-nav-aria-label"class="visually-hidden"data-v-f83db6ba>Main Navigation</span><!--[--><!--[--><aclass="VPLink link VPNavBarMenuLink"href="/guide-to-incrementals/"data-v-f83db6badata-v-47a2263edata-v-3c355974><!--[-->Guide to Incrementals<!--]--><!----></a><!--]--><!--[--><aclass="VPLink link VPNavBarMenuLink"href="/projects/"data-v-f83db6badata-v-47a2263edata-v-3c355974><!--[-->Projects<!--]--><!----></a><!--]--><!--[--><aclass="VPLink link VPNavBarMenuLink"href="https://moddingtree.com"target="_blank"rel="noreferrer"data-v-f83db6badata-v-47a2263edata-v-3c355974><!--[-->Profectus<!--]--><!----></a><!--]--><!--]--></nav><!----><divclass="VPNavBarAppearance appearance"data-v-6f1d18b5data-v-a3e7452b><buttonclass="VPSwitch VPSwitchAppearance"type="button"role="switch"aria-label="toggle dark mode"aria-checked="false"data-v-a3e7452bdata-v-481098f9data-v-eba7420e><spanclass="check"data-v-eba7420e><spanclass="icon"data-v-eba7420e><!--[--><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"viewbox="0 0 24 24"class="sun"data-v-481098f9><pathd="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><pathd="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><pathd="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><pathd="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><pathd="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><pathd="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><pathd="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><pathd="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><pathd="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"viewbox="0 0 24 24"class="moon"data-v-481098f9><pathd="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><divclass="VPSocialLinks VPNavBarSocialLinks social-links"data-v-6f1d18b5data-v-738bef5adata-v-f6988cfb><!--[--><aclass="VPSocialLink"href="https://github.com/thepaperpilot"target="_blank"rel="noopener"data-v-f6988cfbdata-v-e57698f6><svgrole="img"viewBox="0 0 24 24"xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><pathd="M12.297c-6.630-125.373-121205.3033.4389.88.20511.385.6.113.82-.258.82-.5770-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.42218.073.63317.73.63317.7c-1.087-.744.084-.729.084-.7291.2
</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-6f1d18b5data-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><!----></header><!----><!----><divclass="VPContent"id="VPContent"data-v-f44a984adata-v-d981fe29><divclass="VPDoc has-aside"data-v-d981fe29data-v-cfb513e0><divclass="container"data-v-cfb513e0><divclass="aside"data-v-cfb513e0><divclass="aside-curtain"data-v-cfb513e0></div><divclass="aside-container"data-v-cfb513e0><divclass="aside-content"data-v-cfb513e0><divclass="VPDocAside"data-v-cfb513e0data-v-afc4c1a1><!--[--><!--]--><!--[--><!--]--><divclass="VPDocAsideOutline"data-v-afc4c1a1data-v-2865c0b0><divclass="content"data-v-2865c0b0><divclass="outline-marker"data-v-2865c0b0></div><divclass="outline-title"data-v-2865c0b0>On this page</div><navaria-labelledby="doc-outline-aria-label"data-v-2865c0b0><spanclass="visually-hidden"id="doc-outline-aria-label"data-v-2865c0b0> Table of Contents for current page </span><ulclass="root"data-v-2865c0b0data-v-1188541a><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><divclass="spacer"data-v-afc4c1a1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><divclass="content"data-v-cfb513e0><divclass="content-container"data-v-cfb513e0><!--[--><!--]--><mainclass="main"data-v-cfb513e0><divstyle="position:relative;"class="vp-doc _public_lit_docs_subtabs-and-microtabs"data-v-cfb513e0><div><h1id="subtabs-and-microtabs"tabindex="-1">Subtabs and Microtabs <aclass="header-anchor"href="#subtabs-and-microtabs"aria-hidden="true">#</a></h1><p>Subtabs are separate sections of a tab that you can view by selecting one at the top of the tab. Microtabs are smaller areas that function in much the same way. You can also embed layers inside of subtabs/microtabs.</p><p>Subtabs are defined by using the tab format like this, where each element of tabFormat is given the name of that subtab:</p><divclass="language-js"><buttontitle="Copy Code"class="copy"></button><spanclass="lang">js</span><preclass="shiki"><code><spanclass="line"><spanstyle="color:#FFCB6B;">tabFormat</span><spanstyle="color:#89DDFF;">:</span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#89DDFF;">{</span></span>
<spanclass="line"></span></code></pre></div><p>Microtabs are defined similarly, and use the same features, but are defined in the "microtabs" feature. Each entry is a group of tabs which will appear in a microtabs component. The first set, "stuff", has 2 tabs, and the second, "otherStuff", has none.</p><divclass="language-js"><buttontitle="Copy Code"class="copy"></button><spanclass="lang">js</span><preclass="shiki"><code><spanclass="line"><spanstyle="color:#FFCB6B;">microtabs</span><spanstyle="color:#89DDFF;">:</span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#89DDFF;">{</span></span>
<spanclass="line"></span></code></pre></div><p>Normal subtabs and microtab subtabs both use the same features:</p><h1id="features"tabindex="-1">Features: <aclass="header-anchor"href="#features"aria-hidden="true">#</a></h1><ul><li><p>content: The tab layout code for the subtab, in <ahref="./custom-tab-layouts">the tab layout format</a>.</p></li><li><p>style: <strong>optional</strong>. Applies CSS to the whole subtab when switched to, in the form of an "CSS Object", where the keys are CSS attributes, and the values are the values for those attributes (both as strings).</p></li><li><p>buttonStyle: <strong>optional</strong>. A CSS object, which affects the appearance of the button for that subtab.</p></li><li><p>unlocked(): <strong>optional</strong>. a function to determine if the button for this subtab should be visible. By default, a subtab is always unlocked. You can't use the "this" keyword in this function.</p></li><li><p>shouldNotify(): <strong>optional</strong>, if true, the tab button will be highlighted to notify the player that there is something there.</p></li><li><p>embedLayer: <strong>SIGNIFICANT</strong>, the id of another layer. If you have this, it will override "content", "style" and "shouldNotify", instead displaying the entire layer in the subtab.</p></li></ul></div></div></main><!--[--><!--]--><!----><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
