pages/public/lit/docs/custom-tab-layouts.html

70 lines
45 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>Custom tab layouts | 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.974huFbw.css" as="style">
<script type="module" src="/assets/app.B40RczaX.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.Sr2_9k8k.js">
<link rel="modulepreload" href="/assets/chunks/theme.biIk3Tba.js">
<link rel="modulepreload" href="/assets/public_lit_docs_custom-tab-layouts.md.BoQJFtTn.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">
<link rel="authorization_endpoint" href="https://indie.incremental.social/auth">
<link rel="token_endpoint" href="https://indie.incremental.social/auth/token">
<link rel="micropub" href="https://indie.incremental.social/micropub">
<link rel="indieauth-metadata" href="https://indie.incremental.social/.well-known/oauth-authorization-server">
<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="Custom tab layouts">
<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-105848cf 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-display&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;prestige-button&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() { </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">return</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;Melt your points into &quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }],</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;blank&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;display-text&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() { </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">return</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;I have &#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> format</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(player.points) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39; pointy points!&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;color&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;red&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;font-size&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;32px&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;font-family&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Comic Sans MS&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }],</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;blank&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;toggle&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;c&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;beep&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]],</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;milestones&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;blank&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;blank&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;upgrades&quot;</span></span>
<span class="line"><span style="--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&#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 <a href="/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&#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 <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&#39;s upgrades. The argument is optional, and is a the list of rows this component should include, if it doesn&#39;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 &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>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) <a href="./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 &quot;sell one&quot; and &quot;sell all&quot; for buyables, respectively. The argument is the id of the buyable.</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" dat
<script>window.__VP_HASH_MAP__=JSON.parse("{\"garden_activitypub_index.md\":\"CHoak4-M\",\"garden_consensus-democracy_index.md\":\"BoZlusUH\",\"garden_command-palettes_index.md\":\"B8XNoWzL\",\"garden_commune_index.md\":\"3ARTPNdj\",\"about_index.md\":\"YpmaDm_z\",\"garden_cinny_index.md\":\"DinAnrbm\",\"garden_the-beginner-s-guide_index.md\":\"CycCjuXX\",\"garden_freeform-vs-chronological-dichotomy_index.md\":\"DPaTdv2M\",\"guide-to-incrementals_design_criticism_index.md\":\"1Pt--u4r\",\"garden_the-indieweb_amplification_index.md\":\"CHreZo26\",\"garden_art-is-never-complete_index.md\":\"BCNPtWRQ\",\"garden_artificial-intelligence_index.md\":\"C-RJ1I1f\",\"public_lit_docs_challenges.md\":\"Z9Rj0YIU\",\"public_kronos_docs_custom-tab-layouts.md\":\"livval5T\",\"garden_digital-gardens_index.md\":\"BpeFaIJ9\",\"index.md\":\"Bu8VOu8q\",\"now_index.md\":\"CHQLqHUE\",\"public_gamedevtree_2.0-format-changes.md\":\"Bczdru-g\",\"public_gamedevtree_readme.md\":\"DE0tbltW\",\"public_gamedevtree_changelog.md\":\"33CNNJKT\",\"public_gamedevtree_docs_!general-info.md\":\"DE0Ke1e2\",\"public_gamedevtree_docs_achievements.md\":\"C0yB95Wu\",\"public_kronos_changelog.md\":\"D-HmMLD4\",\"garden_network-of-knowledge_index.md\":\"ilzxTCxv\",\"public_kronos_docs_!general-info.md\":\"DBOKRLme\",\"public_gamedevtree_docs_challenges.md\":\"CE_eHHwf\",\"public_kronos_docs_bars.md\":\"CSguFZp_\",\"garden_nostr_index.md\":\"BIc49C3h\",\"public_gamedevtree_docs_basic-layer-breakdown.md\":\"Yqwj_xfc\",\"public_gamedevtree_docs_buyables.md\":\"B23LDgI6\",\"garden_objectivity_index.md\":\"CGmqIW3l\",\"public_gamedevtree_docs_updating-tmt.md\":\"BX_YXvdE\",\"public_lit_docs_main-mod-info.md\":\"BMD6V4Fr\",\"public_lit_docs_milestones.md\":\"DW0yfQPK\",\"public_kronos_docs_challenges.md\":\"Cs3Vfgw-\",\"public_lit_docs_subtabs-and-microtabs.md\":\"_yQ1-Rr1\",\"public_lit_docs_trees-and-tree-customization.md\":\"C9RmdUn6\",\"public_lit_docs_infoboxes.md\":\"CuZo0M8o\",\"public_lit_docs_updating-tmt.md\":\"KobKYOhn\",\"public_lit_docs_upgrades.md\":\"B0k22Nxf\",\"garden_decentralized_index.md\":\"Dz9GnDNN\",\"garden_incremental-social_index.md\":\"D-NBmpuj\",\"garden_individualism_index.md\":\"DmUunVCV\",\"garden_dice-armor_index.md\":\"D9uLn7u7\",\"garden_ivy-road_index.md\":\"D4Uk1e02\",\"garden_life-is-strange_index.md\":\"0h1xNqZr\",\"garden_kronos_index.md\":\"GnXiciW5\",\"garden_local-communities_index.md\":\"DQPpeMgR\",\"garden_direct-democracy_index.md\":\"BXMi8ODl\",\"garden_local-first-software_index.md\":\"CSGi1m4H\",\"garden_federated-identity_index.md\":\"B3KvNIrk\",\"garden_gender_index.md\":\"BoFFsp2i\",\"garden_technocracy_index.md\":\"CcnrW03X\",\"garden_logseq_index.md\":\"B79VM7qi\",\"garden_gerrymandering_index.md\":\"Cv_bgYhL\",\"garden_fedi-v2_index.md\":\"CCZlW5Us\",\"garden_guide-to-incrementals_appeal-to-developers_index.md\":\"KXIJS-Sw\",\"public_lit_docs_layer-features.md\":\"4M5Xu4L1\",\"garden_my-political-beliefs_index.md\":\"eXPgNgpo\",\"garden_matrix_index.md\":\"BK7UGbrl\",\"garden_fediverse_index.md\":\"wfdGuagd\",\"garden_profectus_index.md\":\"CqqLKMAz\",\"garden_my-personal-website_index.md\":\"dtCW8OwP\",\"garden_my-political-journey_index.md\":\"DOuAk9ps\",\"garden_mtx_index.md\":\"g8jZ_V8k\",\"changelog_index.md\":\"Diu6uV4K\",\"garden_my-projects_index.md\":\"BosxtkrK\",\"garden_mbin_index.md\":\"ByTfWBSf\",\"garden_my-browser-stack_index.md\":\"B_flJVoV\",\"garden_the-cozy-web_index.md\":\"COddU592\",\"garden_guide-to-incrementals_navigating-criticism_index.md\":\"ChYfsLkV\",\"garden_political-quizzes_index.md\":\"DUaMJXMX\",\"garden_garden-rss_index.md\":\"CZ3BB12R\",\"garden_social-media_index.md\":\"Civ8iqX3\",\"garden_advent-incremental_index.md\":\"BJdtlLbo\",\"garden_babble-buds_index.md\":\"XSniSrKw\",\"garden_a-plea-to-organize_index.md\":\"D2QUSTvu\",\"garden_atproto_index.md\":\"CRfGu7X-\",\"garden_game-dev-tree_index.md\":\"Bhbc36Lr\",\"garden_neoliberalism_index.md\":\"C0UYbWh6\",\"garden_capture-the-citadel_index.md\":\"Bs_U2tLj\",\"garden_guide-to-incrementals_what-is-content_index.md\":\"p7boOXM
</body>
</html>