2023-11-07 00:46:27 +00:00
<!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 portfolio site" >
< link rel = "preload stylesheet" href = "/assets/style.3ee67463.css" as = "style" >
< script type = "module" src = "/assets/app.88fb6cf0.js" > < / script >
< link rel = "preload" href = "/assets/inter-roman-latin.2ed14f66.woff2" as = "font" type = "font/woff2" crossorigin = "" >
< link rel = "modulepreload" href = "/assets/chunks/framework.1169fbc9.js" >
< link rel = "modulepreload" href = "/assets/chunks/theme.c36cb2db.js" >
2023-11-28 02:32:46 +00:00
< link rel = "modulepreload" href = "/assets/public_gamedevtree_docs_subtabs-and-microtabs.md.9a540a97.lean.js" >
2023-11-07 00:46:27 +00:00
< link rel = "preconnect" href = "https://fonts.googleapis.com" >
< link rel = "stylesheet" href = "https://fonts.googleapis.com/css2?family=Pacifico&family=Roboto+Mono:ital,wght@0,400;0,600;1,400&display=swap" >
< link rel = "manifest" href = "/site.webmanifest" >
< script defer data-domain = "thepaperpilot.org" src = "https://plausible.io/js/plausible.js" > < / script >
< meta name = "og:description" content = "The Paper Pilot portfolio site" >
< script id = "check-dark-mode" > ( ( ) => { const e = localStorage . getItem ( "vitepress-theme-appearance" ) || "auto" , a = window . matchMedia ( "(prefers-color-scheme: dark)" ) . matches ; ( ! e || e === "auto" ? a : e === "dark" ) && document . documentElement . classList . add ( "dark" ) } ) ( ) ; < / script >
< script id = "check-mac-os" > document . documentElement . classList . toggle ( "mac" , /Mac|iPhone|iPod|iPad/i . test ( navigator . platform ) ) ; < / script >
< / head >
< body >
< div id = "app" > < div class = "Layout" data-v-5a346dfe > <!-- [ --> <!-- ] --> <!-- [ --> < 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-5a346dfe data-v-ae24b3ad > < div class = "VPNavBar" data-v-ae24b3ad data-v-a0fd61f4 > < div class = "container" data-v-a0fd61f4 > < div class = "title" data-v-a0fd61f4 > < div class = "VPNavBarTitle" data-v-a0fd61f4 data-v-86d1bed8 > < a class = "title" href = "/" data-v-86d1bed8 > <!-- [ --> <!-- ] --> <!-- --> <!-- [ --> The Paper Pilot<!-- ] --> <!-- [ --> <!-- ] --> < / a > < / div > < / div > < div class = "content" data-v-a0fd61f4 > < div class = "curtain" data-v-a0fd61f4 > < / div > < div class = "content-body" data-v-a0fd61f4 > <!-- [ --> <!-- ] --> < div class = "VPNavBarSearch search" data-v-a0fd61f4 > <!-- --> < / div > < nav aria-labelledby = "main-nav-aria-label" class = "VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f > < span id = "main-nav-aria-label" class = "visually-hidden" data-v-7f418b0f > Main Navigation< / span > <!-- [ --> <!-- [ --> < a class = "VPLink link VPNavBarMenuLink" href = "/guide-to-incrementals/" tabindex = "0" data-v-7f418b0f data-v-42ef59de > <!-- [ --> < span data-v-42ef59de > Guide to Incrementals< / span > <!-- ] --> < / a > <!-- ] --> <!-- [ --> < a class = "VPLink link VPNavBarMenuLink" href = "/projects/" tabindex = "0" data-v-7f418b0f data-v-42ef59de > <!-- [ --> < span data-v-42ef59de > Projects< / span > <!-- ] --> < / a > <!-- ] --> <!-- [ --> < a class = "VPLink link vp-external-link-icon VPNavBarMenuLink" href = "https://moddingtree.com" target = "_blank" rel = "noreferrer" tabindex = "0" data-v-7f418b0f data-v-42ef59de > <!-- [ --> < span data-v-42ef59de > Profectus< / span > <!-- ] --> < / a > <!-- ] --> <!-- ] --> < / nav > <!-- --> < div class = "VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21 > < button class = "VPSwitch VPSwitchAppearance" type = "button" role = "switch" title = "toggle dark mode" aria-checked = "false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198 > < span class = "check" data-v-b1685198 > < span class = "icon" data-v-b1685198 > <!-- [ --> < svg xmlns = "http://www.w3.org/2000/svg" aria-hidden = "true" focusable = "false" viewbox = "0 0 24 24" class = "sun" data-v-ce54a7d1 > < path d = "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 > < path d = "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 > < path d = "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 > < path d = "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 > < path d = "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 > < path d = "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 > < path d = "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 > < path d = "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 > < path d = "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 > < svg xmlns = "http://www.w3.org/2000/svg" aria-hidden = "true" focusable = "false" viewbox = "0 0 24 24" class = "moon" data-v-ce54a7d1 > < path d = "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 > < div class = "VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406 > <!-- [ --> < a class = "VPSocialLink no-icon" href = "https://github.com/thepaperpilot" aria-label = "github" target = "_blank" rel = "noopener" data-v-7bc22406 data-v-f80f8133 > < svg role = "img" viewBox = "0 0 24 24" x
< path d = "M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z" / >
< / svg > < / a > <!-- ] --> < / div > < div class = "VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85 > < button type = "button" class = "button" aria-haspopup = "true" aria-expanded = "false" aria-label = "extra navigation" data-v-9c007e85 > < svg xmlns = "http://www.w3.org/2000/svg" aria-hidden = "true" focusable = "false" viewbox = "0 0 24 24" class = "icon" data-v-9c007e85 > < circle cx = "12" cy = "12" r = "2" > < / circle > < circle cx = "19" cy = "12" r = "2" > < / circle > < circle cx = "5" cy = "12" r = "2" > < / circle > < / svg > < / button > < div class = "menu" data-v-9c007e85 > < div class = "VPMenu" data-v-9c007e85 data-v-e7ea1737 > <!-- --> <!-- [ --> <!-- [ --> <!-- --> < div class = "group" data-v-40855f84 > < div class = "item appearance" data-v-40855f84 > < p class = "label" data-v-40855f84 > Appearance< / p > < div class = "appearance-action" data-v-40855f84 > < button class = "VPSwitch VPSwitchAppearance" type = "button" role = "switch" title = "toggle dark mode" aria-checked = "false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198 > < span class = "check" data-v-b1685198 > < span class = "icon" data-v-b1685198 > <!-- [ --> < svg xmlns = "http://www.w3.org/2000/svg" aria-hidden = "true" focusable = "false" viewbox = "0 0 24 24" class = "sun" data-v-ce54a7d1 > < path d = "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 > < path d = "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 > < path d = "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 > < path d = "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 > < path d = "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 > < path d = "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 > < path d = "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 > < path d = "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 > < path d = "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 > < svg xmlns = "http://www.w3.org/2000/svg" aria-hidden = "true" focusable = "false" viewbox = "0 0 24 24" class = "moon" data-v-ce54a7d1 > < path d = "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 > < / div > < / div > < div class = "group" data-v-40855f84 > < div class = "item social-links" data-v-40855f84 > < div class = "VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406 > <!-- [ --> < a class = "VPSocialLink no-icon" href = "https://github.com/thepaperpilot" aria-label = "github" target = "_blank" rel = "noopener" data-v-7bc22406 data-v-f80f8133 > < svg role = "img" viewBox = "0 0 24 24" xmlns = "http://www.w3.org/2000/svg" > < title > GitHub< / title > < path d = "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" / > < / svg > < / a > < a class = "VPSocialLink no-icon" href = "https://www.linkedin.com/pub/anthony-lawn/a9
< path d = "M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z" / >
< / svg > < / a > <!-- ] --> < / div > < / div > < / div > <!-- ] --> <!-- ] --> < / div > < / div > < / div > <!-- [ --> <!-- ] --> < button type = "button" class = "VPNavBarHamburger hamburger" aria-label = "mobile navigation" aria-expanded = "false" aria-controls = "VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c > < span class = "container" data-v-e5dd9c1c > < span class = "top" data-v-e5dd9c1c > < / span > < span class = "middle" data-v-e5dd9c1c > < / span > < span class = "bottom" data-v-e5dd9c1c > < / span > < / span > < / button > < / div > < / div > < / div > < / div > <!-- --> < / header > < div class = "VPLocalNav fixed reached-top" data-v-5a346dfe data-v-79c8c1df > <!-- --> < div class = "VPLocalNavOutlineDropdown" style = "--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a > < button data-v-1c15a60a > Return to top< / button > <!-- --> < / div > < / div > <!-- --> < div class = "VPContent" id = "VPContent" data-v-5a346dfe data-v-669faec9 > < div class = "VPDoc has-aside" data-v-669faec9 data-v-6b87e69f > <!-- [ --> <!-- ] --> < div class = "container" data-v-6b87e69f > < div class = "aside" data-v-6b87e69f > < div class = "aside-curtain" data-v-6b87e69f > < / div > < div class = "aside-container" data-v-6b87e69f > < div class = "aside-content" data-v-6b87e69f > < div class = "VPDocAside" data-v-6b87e69f data-v-3f215769 > <!-- [ --> <!-- ] --> <!-- [ --> <!-- ] --> < div class = "VPDocAsideOutline" role = "navigation" data-v-3f215769 data-v-d330b1bb > < div class = "content" data-v-d330b1bb > < div class = "outline-marker" data-v-d330b1bb > < / div > < div class = "outline-title" role = "heading" aria-level = "2" data-v-d330b1bb > On this page< / div > < nav aria-labelledby = "doc-outline-aria-label" data-v-d330b1bb > < span class = "visually-hidden" id = "doc-outline-aria-label" data-v-d330b1bb > Table of Contents for current page < / span > < ul class = "root" data-v-d330b1bb data-v-d0ee3533 > <!-- [ --> <!-- ] --> < / ul > < / nav > < / div > < / div > <!-- [ --> <!-- ] --> < div class = "spacer" data-v-3f215769 > < / div > <!-- [ --> <!-- ] --> <!-- --> <!-- [ --> <!-- ] --> <!-- [ --> <!-- ] --> < / div > < / div > < / div > < / div > < div class = "content" data-v-6b87e69f > < div class = "content-container" data-v-6b87e69f > <!-- [ --> <!-- ] --> <!-- --> < main class = "main" data-v-6b87e69f > < div style = "position:relative;" class = "vp-doc _public_gamedevtree_docs_subtabs-and-microtabs" data-v-6b87e69f > < div > < h1 id = "subtabs-and-microtabs" tabindex = "-1" > Subtabs and Microtabs < a class = "header-anchor" href = "#subtabs-and-microtabs" aria-label = "Permalink to "Subtabs and Microtabs"" > < / 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.< / 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 > < div class = "language-js vp-adaptive-theme" > < button title = "Copy Code" class = "copy" > < / button > < span class = "lang" > js< / span > < pre class = "shiki github-dark vp-code-dark" > < code > < span class = "line" > < span style = "color:#E1E4E8;" > < / span > < span style = "color:#B392F0;" > tabFormat< / span > < span style = "color:#E1E4E8;" > : {< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > < / span > < span style = "color:#9ECBFF;" > " Main tab" < / span > < span style = "color:#E1E4E8;" > : {< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > *subtab features*< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > },< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > < / span > < span style = "color:#9ECBFF;" > " Other tab" < / span > < span style = "color:#E1E4E8;" > : {< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > *subtab features*< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > },< / span > < / span >
< span class = "line" > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > etc< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > },< / span > < / span > < / code > < / pre > < pre class = "shiki github-light vp-code-light" > < code > < span class = "line" > < span style = "color:#24292E;" > < / span > < span style = "color:#6F42C1;" > tabFormat< / span > < span style = "color:#24292E;" > : {< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > < / span > < span style = "color:#032F62;" > " Main tab" < / span > < span style = "color:#24292E;" > : {< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > *subtab features*< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > },< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > < / span > < span style = "color:#032F62;" > " Other tab" < / span > < span style = "color:#24292E;" > : {< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > *subtab features*< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > },< / span > < / span >
< span class = "line" > < / span >
< span class = "line" > < span style = "color:#24292E;" > etc< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > },< / span > < / 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 > < div class = "language-js vp-adaptive-theme" > < button title = "Copy Code" class = "copy" > < / button > < span class = "lang" > js< / span > < pre class = "shiki github-dark vp-code-dark" > < code > < span class = "line" > < span style = "color:#E1E4E8;" > < / span > < span style = "color:#B392F0;" > microtabs< / span > < span style = "color:#E1E4E8;" > : {< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > < / span > < span style = "color:#B392F0;" > stuff< / span > < span style = "color:#E1E4E8;" > : {< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > < / span > < span style = "color:#B392F0;" > first< / span > < span style = "color:#E1E4E8;" > : {< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > < / span > < span style = "color:#F97583;" > *< / span > < span style = "color:#E1E4E8;" > subtab features< / span > < span style = "color:#F97583;" > *< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > },< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > < / span > < span style = "color:#B392F0;" > second< / span > < span style = "color:#E1E4E8;" > : {< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > < / span > < span style = "color:#F97583;" > *< / span > < span style = "color:#E1E4E8;" > subtab features< / span > < span style = "color:#F97583;" > *< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > },< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > },< / span > < / span >
< span class = "line" > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > < / span > < span style = "color:#B392F0;" > otherStuff< / span > < span style = "color:#E1E4E8;" > : {< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > < / span > < span style = "color:#6A737D;" > // There could be another set of microtabs here< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > }< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > },< / span > < / span > < / code > < / pre > < pre class = "shiki github-light vp-code-light" > < code > < span class = "line" > < span style = "color:#24292E;" > < / span > < span style = "color:#6F42C1;" > microtabs< / span > < span style = "color:#24292E;" > : {< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > < / span > < span style = "color:#6F42C1;" > stuff< / span > < span style = "color:#24292E;" > : {< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > < / span > < span style = "color:#6F42C1;" > first< / span > < span style = "color:#24292E;" > : {< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > < / span > < span style = "color:#D73A49;" > *< / span > < span style = "color:#24292E;" > subtab features< / span > < span style = "color:#D73A49;" > *< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > },< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > < / span > < span style = "color:#6F42C1;" > second< / span > < span style = "color:#24292E;" > : {< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > < / span > < span style = "color:#D73A49;" > *< / span > < span style = "color:#24292E;" > subtab features< / span > < span style = "color:#D73A49;" > *< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > },< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > },< / span > < / span >
< span class = "line" > < / span >
< span class = "line" > < span style = "color:#24292E;" > < / span > < span style = "color:#6F42C1;" > otherStuff< / span > < span style = "color:#24292E;" > : {< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > < / span > < span style = "color:#6A737D;" > // There could be another set of microtabs here< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > }< / span > < / span >
2023-11-28 02:32:46 +00:00
< span class = "line" > < span style = "color:#24292E;" > },< / 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 "Features:"" > < / 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 " 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 > < / ul > < / div > < / div > < / main > < footer class = "VPDocFooter" data-v-6b87e69f data-v-ef5dee53 > <!-- [ --> <!-- ] --> < div class = "edit-info" data-v-ef5dee53 > <!-- --> < div class = "last-updated" data-v-ef5dee53 > < p class = "VPLastUpdated" data-v-ef5dee53 data-v-7e05ebdb > Last updated: < time datetime = "2023-11-28T02:07:21.000Z" data-v-7e05ebdb > < / time > < / p > < / div > < / div > <!-- --> < / footer > <!-- [ --> <!-- ] --> < / div > < / div > < / div > <!-- [ --> <!-- ] --> < / div > < / div > <!-- --> <!-- [ --> <!-- ] --> < / div > < / div >
2023-12-02 16:14:01 +00:00
< script > w i n d o w . _ _ V P _ H A S H _ M A P _ _ = J S O N . p a r s e ( " { \ " p u b l i c _ l i t _ d o c s _ s u b t a b s - a n d - m i c r o t a b s . m d \ " : \ " 6 7 f f 4 5 1 2 \ " , \ " p u b l i c _ l i t _ d o c s _ m a i n - m o d - i n f o . m d \ " : \ " 8 5 e 5 9 0 0 5 \ " , \ " p u b l i c _ l i t _ d o c s _ b a s i c - l a y e r - b r e a k d o w n . m d \ " : \ " 6 a 7 1 3 2 0 2 \ " , \ " g u i d e - t o - i n c r e m e n t a l s _ l u d o l o g y _ a p p e a l - d e v e l o p e r s _ i n d e x . m d \ " : \ " 1 d 7 9 0 7 d 2 \ " , \ " g u i d e - t o - i n c r e m e n t a l s _ d e s i g n _ i n t r o d u c t i o n _ i n d e x . m d \ " : \ " b d 8 0 d a c f \ " , \ " p u b l i c _ l i t _ d o c s _ a c h i e v e m e n t s . m d \ " : \ " e e 3 2 1 9 2 a \ " , \ " p u b l i c _ l i t _ d o c s _ g e t t i n g - s t a r t e d . m d \ " : \ " 3 c 9 b 5 4 a 0 \ " , \ " p u b l i c _ l i t _ o l d t h i n g s _ 2 . 0 - f o r m a t - c h a n g e s . m d \ " : \ " 7 5 6 5 a 8 c 8 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ b a s i c - l a y e r - b r e a k d o w n . m d \ " : \ " 8 1 0 7 1 a 5 7 \ " , \ " g u i d e - t o - i n c r e m e n t a l s _ i n d e x . m d \ " : \ " a e 9 d 9 a b e \ " , \ " p u b l i c _ k r o n o s _ r e a d m e . m d \ " : \ " 5 5 c 5 f 5 6 7 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ ! g e n e r a l - i n f o . m d \ " : \ " 9 f 7 b 2 4 3 8 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ i n f o b o x e s . m d \ " : \ " 4 f e a c 0 8 4 \ " , \ " p u b l i c _ l i t _ d o c s _ b u y a b l e s . m d \ " : \ " d e 2 5 7 9 e b \ " , \ " p u b l i c _ g a m e d e v t r e e _ 2 . 0 - f o r m a t - c h a n g e s . m d \ " : \ " a c 2 c a 1 5 2 \ " , \ " p u b l i c _ g a m e d e v t r e e _ r e a d m e . m d \ " : \ " b 6 d 5 5 9 b 4 \ " , \ " p u b l i c _ g a m e d e v t r e e _ c h a n g e l o g . m d \ " : \ " e 2 3 c 2 e 4 3 \ " , \ " p r o j e c t s _ i n d e x . m d \ " : \ " 6 9 1 7 b 2 9 0 \ " , \ " p u b l i c _ l i t _ c h a n g e l o g . m d \ " : \ " 7 f f c 5 c 5 1 \ " , \ " p r o j e c t s _ o p t i s p e e c h _ i n d e x . m d \ " : \ " 6 c c 0 4 1 3 8 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ a c h i e v e m e n t s . m d \ " : \ " 7 f 7 8 6 d 8 e \ " , \ " p u b l i c _ l i t _ d o c s _ b a r s . m d \ " : \ " b 9 f e a 6 6 4 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ b a r s . m d \ " : \ " e c 7 c c 3 5 1 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ b u y a b l e s . m d \ " : \ " 3 6 1 2 8 e 1 0 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ b a s i c - l a y e r - b r e a k d o w n . m d \ " : \ " 4 7 a 2 8 d 0 0 \ " , \ " i n d e x . m d \ " : \ " 8 1 9 7 7 6 d d \ " , \ " p r o j e c t s _ b a b b l e _ i n d e x . m d \ " : \ " 8 5 3 4 0 9 7 e \ " , \ " p r o j e c t s _ c i t a d e l _ i n d e x . m d \ " : \ " a a 4 b b b 3 b \ " , \ " p u b l i c _ k r o n o s _ d o c s _ u p d a t i n g - t m t . m d \ " : \ " 9 6 9 c 1 9 e 7 \ " , \ " g u i d e - t o - i n c r e m e n t a l s _ l u d o l o g y _ c o n t e n t _ i n d e x . m d \ " : \ " 1 5 f 9 8 8 8 9 \ " , \ " p u b l i c _ l i t _ d o c s _ c l i c k a b l e s . m d \ " : \ " 6 d 4 a 1 5 0 c \ " , \ " p u b l i c _ l i t _ d o c s _ ! g e n e r a l - i n f o . m d \ " : \ " c 7 2 9 3 c 4 6 \ " , \ " p u b l i c _ l i t _ d o c s _ c u s t o m - t a b - l a y o u t s . m d \ " : \ " a 8 f 2 1 b 4 2 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ c h a l l e n g e s . m d \ " : \ " 4 c d 0 d a e 3 \ " , \ " p u b l i c _ l i t _ d o c s _ m i l e s t o n e s . m d \ " : \ " c 3 8 1 f 6 7 6 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ g e t t i n g - s t a r t e d . m d \ " : \ " a 5 5 7 6 7 4 c \ " , \ " p u b l i c _ k r o n o s _ d o c s _ s u b t a b s - a n d - m i c r o t a b s . m d \ " : \ " 5 d 9 8 3 3 f 5 \ " , \ " p u b l i c _ l i t _ r e a d m e . m d \ " : \ " 7 6 d 5 8 5 a 3 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ p a r t i c l e s . m d \ " : \ " c f 4 0 e d 2 c \ " , \ " p u b l i c _ k r o n o s _ d o c s _ m i l e s t o n e s . m d \ " : \ " 3 1 9 7 e 6 a 0 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ b a r s . m d \ " : \ " 6 6 f d 7 0 1 4 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ l a y e r - f e a t u r e s . m d \ " : \ " 0 8 8 4 5 d 8 6 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ l a y e r - f e a t u r e s . m d \ " : \ " 1 9 2 9 a 4 1 4 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ i n f o b o x e s . m d \ " : \ " 9 0 1 8 b c 1 b \ " , \ " p u b l i c _ k r o n o s _ d o c s _ b u y a b l e s . m d \ " : \ " 5 5 8 1 9 f 1 c \ " , \ " p u b l i c _ k r o n o s _ d o c s _ t r e e s - a n d - t r e e - c u s t o m i z a t i o n . m d \ " : \ " e e 2 f 3 f 3 e \ " , \ " p u b l i c _ k r o n o s _ c h a n g e l o g . m d \ " : \ " a a 1 0 0 f a 9 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ a c h i e v e m e n t s . m d \ " : \ " 7 8 4 0 8 6 7 1 \ " , \ " p u b l i c _ l i t _ d o c s _ l a y e r - f e a t u r e s . m d \ " : \ " 4 2 4 1 1 a 7 c \ " , \ " p u b l i c _ k r o n o s _ d o c s _ m a i n - m o d - i n f o . m d \ " : \ " 6 1 c 9 4 c 0 5 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ m a i n - m o d - i n f o . m d \ " : \ " b 5 0 f b 2 0 1 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ c l i c k a b l e s . m d \ " : \ " a 1 9 4 7 8 4 a \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ u p d a t i n g - t m t . m d \ " : \ " 6 3 4 2 6 7 7 4 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ s u b t a b s - a n d - m i c r o t a b s . m d \ " : \ " 9 a 5 4 0 a 9 7 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ c u s t o m - t a b - l a y o u t s . m d \ " : \ " 7 a e d c 5 6 4 \ " , \ " p u b l i c _ k r o n o s _ o l d t h i n g s _ 2 . 0 - f o r m a t - c h a n g e s . m d \ " : \ " e d 0 a 3 b 5 6 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ m i l e s t o n e s . m d \ " : \ " 4 5 9 2 1 2 4 7 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ c u s t o m - t a b - l a y o u t s . m d \ " : \ " c 9 9 1 1 2 6 9 \ " , \ " g u i d e - t o - i n c r e m e n t a l s _ l u d o l o g y _ a p p e a l - g a m e r s _ i n d e x . m d \ " : \ " 6 3 2 c 1 a 6 c \ " , \ " p u b l i c _ l i t _ d o c s _ i n f o b o x e s . m d \ " : \ " a 4 1 a 0 b 4 4 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ g e t t i n g - s t a r t e d . m d \ " : \ " f 4 4 a f d a b \ " , \ " g u i d e - t o - i n c r e m e n t a l s _ d e s i g n _ c r i t i c i s m _ i n d e x . m d \ " : \ " b a b c 7 a 8 a \ " , \ " p r o j e c t s _ d i c e _ i n d e x . m d \ " : \ " 2 d 7 3 5 5 0 3 \ " , \ " p u b l i c _ l i t _ d o c s _ t r e e s - a n d - t r e e - c u s t o m i z a t i o n . m d \ " : \ " b 9 2 1 b d d 3 \ " , \ " p u b l i c _ l i t _ d o c s _ u p g r a d e s . m d \ " : \ " 3 3 3 5 0 5 8 b \ " , \ " p u b l i c _ l i t _ d o c s _ u p d a t i n g - t m t . m d \ " : \ " 7 3 0 c 6 9 3 2 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ g r i d s . m d \ " : \ " b c 6 a 5 c 9 2 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ u p g r a d e s . m d \ " : \ " 4 d 0 1 9 3 f 7 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ ! g e n e r a l - i n f o . m d \ " : \ " 0 c 0 e 9 5 e 5 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ u p g r a d e s . m d \ " : \ " 3 9 f d 2 d c 4 \ " , \ " g u i d e - t o - i n c r e m e n t a l s _ l u d o l o g y _ d e f i n i t i o n _ i n d e x . m d \ " : \ " 0 9 5 6 9 5 b 4 \ " , \ " p r o j e c t s _ v e c s _ i n d e x . m d \ " : \ " 5 f e 5 5 5 b 1 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ c l i c k a b l e s . m d \ " : \ " 4 0 8 8 0 b 1 9 \ " , \ " p u b l i c _ l i t _ d o c s _ c h a l l e n g e s . m d \ " : \ " 0 2 d 8 6 b 3 6 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ c h a l l e n g e s . m d \ " : \ " 0 c 2 6 1 e 6 f \ " } " ) ; w i n d o w . _ _ V P _ S I T E _ D A T A _ _ = J S O N . p a r s e ( " { \ " l a n g \ " : \ " e n - U S \ " , \ " d i r \ " : \ " l t r \ " , \ " t i t l e \ " : \ " T h e P a p e r P i l
2023-11-07 00:46:27 +00:00
< / body >
< / html >
