2023-11-28 02:32:46 +00:00
import { _ as s , o as a , c as n , Q as e } from "./chunks/framework.1169fbc9.js" ; const h = 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","lastUpdated":1701137241000}' ) , t = { name : "public/gamedevtree/docs/subtabs-and-microtabs.md" } , l = e ( ` <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>
2023-11-07 00:46:27 +00:00
< span class = "line" > < span style = "color:#E1E4E8;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 9 E C B F F ; " > & q u o t ; M a i n t a b & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # E 1 E 4 E 8 ; " > : { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#E1E4E8;" > * subtab features * < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#E1E4E8;" > } , < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#E1E4E8;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 9 E C B F F ; " > & q u o t ; O t h e r t a b & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # E 1 E 4 E 8 ; " > : { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#E1E4E8;" > * subtab features * < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#E1E4E8;" > } , < / s p a n > < / s p a n >
< span class = "line" > < / s p a n >
< span class = "line" > < span style = "color:#E1E4E8;" > etc < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#E1E4E8;" > } , < / s p a n > < / s p a n > < / c o d e > < / p r e > < p r e c l a s s = " s h i k i g i t h u b - l i g h t v p - c o d e - l i g h t " > < 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 = " c o l o r : # 2 4 2 9 2 E ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # 6 F 4 2 C 1 ; " > t a b F o r m a t < / s p a n > < s p a n s t y l e = " c o l o r : # 2 4 2 9 2 E ; " > : { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#24292E;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 0 3 2 F 6 2 ; " > & q u o t ; M a i n t a b & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # 2 4 2 9 2 E ; " > : { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#24292E;" > * subtab features * < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#24292E;" > } , < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#24292E;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 0 3 2 F 6 2 ; " > & q u o t ; O t h e r t a b & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # 2 4 2 9 2 E ; " > : { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#24292E;" > * subtab features * < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#24292E;" > } , < / s p a n > < / s p a n >
< span class = "line" > < / s p a n >
< span class = "line" > < span style = "color:#24292E;" > etc < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#24292E;" > } , < / 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 g i t h u b - d a r k v p - c o d e - d a r k " > < 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 = " c o l o r : # E 1 E 4 E 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # 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 = " c o l o r : # E 1 E 4 E 8 ; " > : { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#E1E4E8;" > < / s p a n > < s p a n s t y l e = " c o l o r : # B 3 9 2 F 0 ; " > s t u f f < / s p a n > < s p a n s t y l e = " c o l o r : # E 1 E 4 E 8 ; " > : { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#E1E4E8;" > < / s p a n > < s p a n s t y l e = " c o l o r : # B 3 9 2 F 0 ; " > f i r s t < / s p a n > < s p a n s t y l e = " c o l o r : # E 1 E 4 E 8 ; " > : { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#E1E4E8;" > < / s p a n > < s p a n s t y l e = " c o l o r : # F 9 7 5 8 3 ; " > * < / s p a n > < s p a n s t y l e = " c o l o r : # 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 = " c o l o r : # F 9 7 5 8 3 ; " > * < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#E1E4E8;" > } , < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#E1E4E8;" > < / s p a n > < s p a n s t y l e = " c o l o r : # B 3 9 2 F 0 ; " > s e c o n d < / s p a n > < s p a n s t y l e = " c o l o r : # E 1 E 4 E 8 ; " > : { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#E1E4E8;" > < / s p a n > < s p a n s t y l e = " c o l o r : # F 9 7 5 8 3 ; " > * < / s p a n > < s p a n s t y l e = " c o l o r : # 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 = " c o l o r : # F 9 7 5 8 3 ; " > * < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#E1E4E8;" > } , < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#E1E4E8;" > } , < / s p a n > < / s p a n >
< span class = "line" > < / s p a n >
< span class = "line" > < span style = "color:#E1E4E8;" > < / s p a n > < s p a n s t y l e = " c o l o r : # B 3 9 2 F 0 ; " > o t h e r S t u f f < / s p a n > < s p a n s t y l e = " c o l o r : # E 1 E 4 E 8 ; " > : { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#E1E4E8;" > < /span><span style="color:#6A737D;">/ / There could be another set of microtabs here < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#E1E4E8;" > } < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#E1E4E8;" > } , < / s p a n > < / s p a n > < / c o d e > < / p r e > < p r e c l a s s = " s h i k i g i t h u b - l i g h t v p - c o d e - l i g h t " > < 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 = " c o l o r : # 2 4 2 9 2 E ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # 6 F 4 2 C 1 ; " > m i c r o t a b s < / s p a n > < s p a n s t y l e = " c o l o r : # 2 4 2 9 2 E ; " > : { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#24292E;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 6 F 4 2 C 1 ; " > s t u f f < / s p a n > < s p a n s t y l e = " c o l o r : # 2 4 2 9 2 E ; " > : { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#24292E;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 6 F 4 2 C 1 ; " > f i r s t < / s p a n > < s p a n s t y l e = " c o l o r : # 2 4 2 9 2 E ; " > : { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#24292E;" > < / s p a n > < s p a n s t y l e = " c o l o r : # D 7 3 A 4 9 ; " > * < / s p a n > < s p a n s t y l e = " c o l o r : # 2 4 2 9 2 E ; " > 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 = " c o l o r : # D 7 3 A 4 9 ; " > * < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#24292E;" > } , < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#24292E;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 6 F 4 2 C 1 ; " > s e c o n d < / s p a n > < s p a n s t y l e = " c o l o r : # 2 4 2 9 2 E ; " > : { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#24292E;" > < / s p a n > < s p a n s t y l e = " c o l o r : # D 7 3 A 4 9 ; " > * < / s p a n > < s p a n s t y l e = " c o l o r : # 2 4 2 9 2 E ; " > 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 = " c o l o r : # D 7 3 A 4 9 ; " > * < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#24292E;" > } , < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#24292E;" > } , < / s p a n > < / s p a n >
< span class = "line" > < / s p a n >
< span class = "line" > < span style = "color:#24292E;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 6 F 4 2 C 1 ; " > o t h e r S t u f f < / s p a n > < s p a n s t y l e = " c o l o r : # 2 4 2 9 2 E ; " > : { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#24292E;" > < /span><span style="color:#6A737D;">/ / There could be another set of microtabs here < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#24292E;" > } < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#24292E;" > } , < / 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 ) , p = [ l ] ; f u n c t i o n o ( c , r , i , E , u , b ) { r e t u r n a ( ) , n ( " d i v " , n u l l , p ) } c o n s t d = s ( t , [ [ " r e n d e r " , o ] ] ) ; e x p o r t { h a s _ _ p a g e D a t a , d a s d e f a u l t } ;