2024-06-17 05:09:50 +00:00
import { _ as s , c as a , o as t , a4 as i } from "./chunks/framework.CsM8T_AH.js" ; const u = JSON . parse ( '{"title":"Subtabs and Microtabs","description":"","frontmatter":{},"headers":[],"relativePath":"public/gamedevtree/docs/subtabs-and-microtabs.md","filePath":"public/gamedevtree/docs/subtabs-and-microtabs.md"}' ) , e = { name : "public/gamedevtree/docs/subtabs-and-microtabs.md" } , n = i ( ` <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 shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> tabFormat</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
2024-06-17 04:46:30 +00:00
< span class = "line" > < span style = "--shiki-light:#032F62;--shiki-dark:#9ECBFF;" > & quot ; Main tab & quot ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > : { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#24292E;--shiki-dark:#E1E4E8;" > * subtab features * < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#24292E;--shiki-dark:#E1E4E8;" > } , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#032F62;--shiki-dark:#9ECBFF;" > & quot ; Other tab & quot ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > : { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#24292E;--shiki-dark:#E1E4E8;" > * subtab features * < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#24292E;--shiki-dark:#E1E4E8;" > } , < / s p a n > < / s p a n >
< span class = "line" > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#24292E;--shiki-dark:#E1E4E8;" > etc < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#24292E;--shiki-dark:#E1E4E8;" > } , < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > M i c r o t a b s a r e d e f i n e d s i m i l a r l y , a n d u s e t h e s a m e f e a t u r e s , b u t a r e d e f i n e d i n t h e & q u o t ; m i c r o t a b s & q u o t ; f e a t u r e . E a c h e n t r y i s a g r o u p o f t a b s w h i c h w i l l a p p e a r i n a m i c r o t a b s c o m p o n e n t . T h e f i r s t s e t , & q u o t ; s t u f f & q u o t ; , h a s 2 t a b s , a n d t h e s e c o n d , & q u o t ; o t h e r S t u f f & q u o t ; , h a s n o n e . < / p > < d i v c l a s s = " l a n g u a g e - j s v p - a d a p t i v e - t h e m e " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > j s < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s g i t h u b - l i g h t g i t h u b - d a r k v p - c o d e " t a b i n d e x = " 0 " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n s t y l e = " - - s h i k i - l i g h t : # 6 F 4 2 C 1 ; - - s h i k i - d a r k : # B 3 9 2 F 0 ; " > m i c r o t a b s < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > : { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#6F42C1;--shiki-dark:#B392F0;" > stuff < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > : { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#6F42C1;--shiki-dark:#B392F0;" > first < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > : { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#D73A49;--shiki-dark:#F97583;" > * < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > s u b t a b f e a t u r e s < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # D 7 3 A 4 9 ; - - s h i k i - d a r k : # F 9 7 5 8 3 ; " > * < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#24292E;--shiki-dark:#E1E4E8;" > } , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#6F42C1;--shiki-dark:#B392F0;" > second < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > : { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#D73A49;--shiki-dark:#F97583;" > * < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > s u b t a b f e a t u r e s < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # D 7 3 A 4 9 ; - - s h i k i - d a r k : # F 9 7 5 8 3 ; " > * < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#24292E;--shiki-dark:#E1E4E8;" > } , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#24292E;--shiki-dark:#E1E4E8;" > } , < / s p a n > < / s p a n >
< span class = "line" > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#6F42C1;--shiki-dark:#B392F0;" > otherStuff < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > : { < / s p a n > < / s p a n >
< 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;" > } < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#24292E;--shiki-dark:#E1E4E8;" > } , < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > N o r m a l s u b t a b s a n d m i c r o t a b s u b t a b s b o t h u s e t h e s a m e f e a t u r e s : < / p > < h 1 i d = " f e a t u r e s " t a b i n d e x = " - 1 " > F e a t u r e s : < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # f e a t u r e s " a r i a - l a b e l = " P e r m a l i n k t o & q u o t ; F e a t u r e s : & q u o t ; " > < / a > < / h 1 > < u l > < l i > < p > c o n t e n t : T h e t a b l a y o u t c o d e f o r t h e s u b t a b , i n < a h r e f = " . / c u s t o m - t a b - l a y o u t s " > t h e t a b l a y o u t f o r m a t < / a > < / p > < / l i > < l i > < p > s t y l e : < s t r o n g > O p t i o n a l < / s t r o n g > , A p p l i e s C S S t o t h e w h o l e s u b t a b w h e n s w i t c h e d t o , i n t h e f o r m o f a n & q u o t ; C S S O b j e c t & q u o t ; , w h e r e t h e k e y s a r e C S S a t t r i b u t e s , a n d t h e v a l u e s a r e t h e v a l u e s f o r t h o s e a t t r i b u t e s ( b o t h a s s t r i n g s ) < / p > < / l i > < l i > < p > b u t t o n S t y l e : < s t r o n g > O p t i o n a l < / s t r o n g > , A C S S o b j e c t , w h i c h a f f e c t s t h e a p p e a r a n c e o f t h e b u t t o n f o r t h a t s u b t a b . < / p > < / l i > < l i > < p > u n l o c k e d ( ) : < s t r o n g > O p t i o n a l < / s t r o n g > , a f u n c t i o n t o d e t e r m i n e i f t h e b u t t o n f o r t h i s s u b t a b s h o u l d b e v i s i b l e . B y d e f a u l t , a s u b t a b i s a l w a y s u n l o c k e d . ( Y o u c a n & # 3 9 ; t u s e t h e & q u o t ; t h i s & q u o t ; k e y w o r d i n t h i s f u n c t i o n . ) < / p > < / l i > < / u l > ` , 9 ) , l = [ n ] ; f u n c t i o n h ( p , r , o , k , c , d ) { r e t u r n t ( ) , a ( " d i v " , n u l l , l ) } c o n s t E = s ( e , [ [ " r e n d e r " , h ] ] ) ; e x p o r t { u a s _ _ p a g e D a t a , E a s d e f a u l t } ;