pages/public/lit/docs/subtabs-and-microtabs.html

77 lines
41 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Subtabs and Microtabs | The Paper Pilot</title>
<meta name="description" content="The Paper Pilot's Digital Garden">
<meta name="generator" content="VitePress v1.2.2">
<link rel="preload stylesheet" href="/assets/style.enV22DSr.css" as="style">
<script type="module" src="/assets/app.bvS3b80r.js"></script>
<link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/assets/chunks/framework.DvHfxfnp.js">
<link rel="modulepreload" href="/assets/chunks/theme.tcXxhaJh.js">
<link rel="modulepreload" href="/assets/public_lit_docs_subtabs-and-microtabs.md.BQEflp-r.lean.js">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Itim&amp;family=Roboto+Mono:ital,wght@0,400;0,600;1,400&amp;display=block">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#3a0839">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="msapplication-TileColor" content="#00FFFF">
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="theme-color" content="#3B4252">
<link rel="alternate" type="text/mf2+html" href="/changelog">
<link rel="alternate" type="application/rss+xml" title="Changelog" href="/changelog/rss">
<link rel="alternate" type="application/atom+xml" title="Changelog" href="/changelog/atom">
<link rel="alternate" type="application/json+xml" title="Changelog" href="/changelog/json">
<link rel="me" href="mailto:thepaperpilot@incremental.social">
<link rel="me" href="https://incremental.social/u/thepaperpilot">
<link rel="me" href="https://matrix.to/#/@thepaperpilot:incremental.social">
<link rel="me" href="https://code.incremental.social/thepaperpilot">
<link rel="me" href="https://www.linkedin.com/in/anthony-lawn/">
<link rel="me" href="https://mastodon.gamedev.place/@thepaperpilot">
<link rel="me" href="https://beehaw.org/u/thepaperpilot">
<link rel="me" href="https://www.reddit.com/user/ThePaperPilot/">
<link rel="me" href="https://github.com/thepaperpilot">
<link rel="me" href="https://twitter.com/ThePaperPilot">
<script data-goatcounter="https://thepaperpilot.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
<meta name="og:title" content="Subtabs and Microtabs">
<meta name="og:description" content="">
<meta name="og:image" content="https://www.thepaperpilot.org/paperpilot_thumb.png">
<meta name="og:site_name" content="The Paper Pilot's Digital Garden">
</head>
<body>
<div id="app"><div class="Layout" data-v-e0858c25 data-v-5d98c3a5><!--[--><!--[--><!--]--><!----><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar top" data-v-ae24b3ad data-v-ccf7ddec><div class="wrapper" data-v-ccf7ddec><div class="container" data-v-ccf7ddec><div class="title" data-v-ccf7ddec><div class="VPNavBarTitle has-sidebar" data-v-ccf7ddec data-v-ab179fa1><a class="title" href="/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>The Paper Pilot</span><!--[--><!--]--></a></div></div><div class="content" data-v-ccf7ddec><div class="content-body" data-v-ccf7ddec><!--[--><!--]--><div class="VPNavBarSearch search" data-v-ccf7ddec><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-ccf7ddec data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://moddingtree.com" target="_blank" rel="noreferrer" tabindex="0" data-v-7f418b0f data-v-9c663999><!--[--><span data-v-9c663999>Profectus</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://incremental.social" target="_blank" rel="noreferrer" tabindex="0" data-v-7f418b0f data-v-9c663999><!--[--><span data-v-9c663999>Incremental Social</span><!--]--></a><!--]--><!--]--></nav><!----><!----><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-ccf7ddec data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://code.incremental.social/thepaperpilot" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Forgejo</title><path d="M16.7773 0c1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.1175a7.0759 7.0759 0 0 1 4.148-1.4205l.1176-.001 1.3385.0002c.4973-.8827 1.4434-1.4788 2.5288-1.4788 1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.319c.8827.4973 1.4788 1.4434 1.4788 2.5287 0 1.602-1.2986 2.9005-2.9005 2.9005-1.6018 0-2.9004-1.2986-2.9004-2.9005 0-1.0853.596-2.0314 1.4788-2.5287l-.0002-9.9831c0-3.887 3.1195-7.0453 6.9915-7.108l.1176-.001h1.3385C14.7458.5962 15.692 0 16.7773 0ZM7.2227 19.9052c-.6596 0-1.1943.5347-1.1943 1.1943s.5347 1.1943 1.1943 1.1943 1.1944-.5347 1.1944-1.1943-.5348-1.1943-1.1944-1.1943Zm9.5546-10.4644c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Zm0-7.7346c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Z"/></svg></a><a class="VPSocialLink no-icon" href="https://matrix.to/#/@thepaperpilot:incremental.social" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Matrix</title><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;Main tab&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> content: [tab format things],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> *subtab features*</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;Other tab&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> content: [tab format things],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> *subtab features*</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> etc</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Microtabs are defined similarly, and use the same features, but are defined in the &quot;microtabs&quot; feature. Each entry is a group of tabs which will appear in a microtabs component. The first set, &quot;stuff&quot;, has 2 tabs, and the second, &quot;otherStuff&quot;, has none.</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">microtabs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> stuff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> first</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [tab format things],</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> *</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">subtab features</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">*</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> second</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [tab format things],</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> *</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">subtab features</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">*</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> otherStuff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // There could be another set of microtabs here</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Normal subtabs and microtab subtabs both use the same features:</p><h1 id="features" tabindex="-1">Features: <a class="header-anchor" href="#features" aria-label="Permalink to &quot;Features:&quot;"></a></h1><ul><li><p>content: The tab layout code for the subtab, in <a href="./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 &quot;CSS Object&quot;, 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&#39;t use the &quot;this&quot; 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 &quot;content&quot;, &quot;style&quot; and &quot;shouldNotify&quot;, instead displaying the entire layer in the subtab.</p></li></ul></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-d4a0bba5><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-d4a0bba5><span class="visually-hidden" id="doc-footer-aria-label" data-v-d4a0bba5>Pager</span><div class="pager" data-v-d4a0bba5><!----></div><div class="pager" data-v-d4a0bba5><a class="VPLink link pager-link next" href="/garden/anarchism" data-v-d4a0bba5><!--[--><span class="desc" data-v-d4a0bba5>Next page</span><span class="title" data-v-d4a0bba5>Anarchism</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><footer class="vp-doc" data-v-e0858c25><div data-v-e0858c25>CC 2024 <a class="h-card" rel="me" href="/about" data-v-e0858c25><img src="/me.jpg" alt="" data-v-e0858c25>The Paper Pilot</a>. <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/" data-v-e0858c25>CC BY-NC-SA 4.0</a>.</div><div data-v-e0858c25>Any and all opinions listed here are my own and not representative of my employers; future, past and present.</div><div data-v-e0858c25><a href="https://resume.incremental.social/thepaperpilot/thepaperpilot" data-v-e0858c25>Resume</a> (not actively seeking new opportunities).</div><div data-v-e0858c25>Site built from <a href="https://code.incremental.social/thepaperpilot/pages/commit/711e059d4efe0ac7643ba587211f8b843292c5df" data-v-e0858c25>this commit</a> on <time data-v-e0858c25>Tuesday, September 24, 2024 at 02:55:02</time>. <a href="https://www.thepaperpilot.org/licenses.txt" data-v-e0858c25>Legal disclaimers</a>.</div></footer><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"garden_commune_index.md\":\"DSUnilqG\",\"public_gamedevtree_docs_clickables.md\":\"CwLsimiU\",\"garden_weird_index.md\":\"BlLx7wre\",\"garden_the-small-web_index.md\":\"C7jfttLJ\",\"garden_v-ecs_index.md\":\"D_X8I8_P\",\"garden_video-game-monetization_index.md\":\"6V6QGPDQ\",\"public_lit_docs_trees-and-tree-customization.md\":\"C8iASWgy\",\"public_lit_docs_layer-features.md\":\"DF81fjyw\",\"public_lit_docs_main-mod-info.md\":\"CcRWcMdS\",\"public_lit_docs_milestones.md\":\"CGwN80sv\",\"public_lit_docs_subtabs-and-microtabs.md\":\"BQEflp-r\",\"public_lit_docs_getting-started.md\":\"BxRLZ8_n\",\"public_lit_readme.md\":\"84-k6GVT\",\"garden_decentralized_index.md\":\"K5mPhW5C\",\"garden_synapse_index.md\":\"BHB2NDZF\",\"garden_the-indieweb_amplification_index.md\":\"D8ZbNckW\",\"public_gamedevtree_docs_achievements.md\":\"jhkjuzaR\",\"public_lit_docs_infoboxes.md\":\"C0nPRfky\",\"garden_guide-to-incrementals_index.md\":\"w8V4Lxkj\",\"garden_consensus-democracy_index.md\":\"C8lkfycK\",\"garden_guide-to-incrementals_defining-the-genre_index.md\":\"CXRNYa3i\",\"garden_guide-to-incrementals_appeal-to-players_index.md\":\"zCSel8sP\",\"garden_art-is-never-complete_index.md\":\"B7u6xEJl\",\"garden_davey-wreden_index.md\":\"BddJZ5s9\",\"changelog_index.md\":\"BDr1CQ2v\",\"garden_advent-incremental_index.md\":\"CdAF0tdP\",\"garden_abolitionism_index.md\":\"HjImmOqX\",\"garden_direct-democracy_index.md\":\"DTREMFCG\",\"public_kronos_old things_2.0-format-changes.md\":\"BM0FXptY\",\"garden_fediverse_index.md\":\"BuEqUtTv\",\"garden_federated-identity_index.md\":\"DwtOttQ3\",\"about_index.md\":\"DNEsxkhw\",\"public_gamedevtree_docs_basic-layer-breakdown.md\":\"Ykqytlzk\",\"garden_babble-buds_index.md\":\"3HchoHT4\",\"garden_forgejo_index.md\":\"y4Unga4K\",\"public_gamedevtree_docs_challenges.md\":\"cvYq35wY\",\"garden_fedi-v2_index.md\":\"7IZyLMfv\",\"garden_guide-to-incrementals_navigating-criticism_index.md\":\"DKa5fpPt\",\"public_lit_docs_bars.md\":\"DFEFprv8\",\"garden_chronological_index.md\":\"Dmo7d-SF\",\"garden_cinny_index.md\":\"CiQUotMu\",\"garden_incremental-social_index.md\":\"DWGgR578\",\"garden_chat-glue_index.md\":\"GjRtxZmS\",\"garden_capture-the-citadel_index.md\":\"BrrCL1wl\",\"garden_command-palettes_index.md\":\"DPmU3boD\",\"garden_game-dev-tree_index.md\":\"DE3agj3d\",\"garden_freeform-vs-chronological-dichotomy_index.md\":\"DTl6FHYn\",\"public_gamedevtree_docs_infoboxes.md\":\"B4DD8BvC\",\"public_gamedevtree_docs_milestones.md\":\"Idyk5tE3\",\"public_gamedevtree_docs_updating-tmt.md\":\"Clk0TMnI\",\"garden_garden-rss_index.md\":\"d-VCQhgl\",\"public_kronos_readme.md\":\"zcQPLTsl\",\"public_kronos_docs_bars.md\":\"DU3nCdnU\",\"garden_guide-to-incrementals_appeal-to-developers_index.md\":\"CGzOMsX-\",\"public_kronos_docs_updating-tmt.md\":\"BxVzngxM\",\"public_gamedevtree_docs_upgrades.md\":\"BspSzPzA\",\"garden_pre-order-bonuses_index.md\":\"DjoQUv3i\",\"garden_webrings_index.md\":\"Dy8f-WPg\",\"garden_logseq_index.md\":\"B10o7vfo\",\"garden_mtx_index.md\":\"C9nQk47o\",\"garden_mbin_index.md\":\"jEAOTFmS\",\"garden_neoliberalism_index.md\":\"CNpbQ8Ob\",\"garden_matrix_index.md\":\"CaEKzDw6\",\"garden_the-cozy-web_index.md\":\"BNueo8_T\",\"garden_premium-currency_index.md\":\"Bo5SfVsH\",\"public_lit_old things_2.0-format-changes.md\":\"BwaKJMKt\",\"garden_representative-democracy_index.md\":\"DePKpU-m\",\"garden_social-media_index.md\":\"CwL0KJWH\",\"garden_this-knowledge-hub_index.md\":\"Bnn_8wyP\",\"garden_opti-speech_index.md\":\"rImom0Pe\",\"public_lit_docs_challenges.md\":\"DtmSP6zf\",\"garden_life-is-strange_index.md\":\"CHhgC4FB\",\"garden_local-communities_index.md\":\"CxtMAEow\",\"public_lit_docs_clickables.md\":\"CoIWXGHw\",\"garden_my-personal-website_index.md\":\"UlWUATeX\",\"garden_profectus_index.md\":\"iOV0eykS\",\"garden_the-beginner-s-guide_index.md\":\"CNCAZIou\",\"garden_nostr_index.md\":\"DPIFzQME\",\"garden_planar-pioneers_index.md\":\"B2V0Ey-p\",\"public_kronos_docs_particles.md\":\"a4-BPTpH\",\"public_kronos_docs_upgrades.md\":\"D1pH3BI1\",\"p
</body>
</html>