2022-11-12 03:03:09 +00:00
import { _ as s , c as a , o as n , d as t } from "./app.1a35c4a8.js" ; const D = JSON . parse ( '{"title":"Subtabs and Microtabs","description":"","frontmatter":{},"headers":[],"relativePath":"public/gamedevtree/docs/subtabs-and-microtabs.md","lastUpdated":null}' ) , e = { name : "public/gamedevtree/docs/subtabs-and-microtabs.md" } , o = t ( ` <h1 id="subtabs-and-microtabs" tabindex="-1">Subtabs and Microtabs <a class="header-anchor" href="#subtabs-and-microtabs" aria-hidden="true">#</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"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">tabFormat</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
2022-10-05 00:48:27 +00:00
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # C 3 E 8 8 D ; " > M a i n t a b < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > : < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > * subtab features * < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > } , < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # C 3 E 8 8 D ; " > O t h e r t a b < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > : < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > * subtab features * < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > } , < / s p a n > < / s p a n >
< span class = "line" > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > e t c < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > } , < / s p a n > < / s p a n >
2022-11-12 03:03:09 +00:00
< span class = "line" > < / 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 " > < 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 " > < 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 : # A 6 A C C D ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # F F C B 6 B ; " > 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 : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
2022-10-05 00:48:27 +00:00
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # F F C B 6 B ; " > s t u f f < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # F F C B 6 B ; " > f i r s t < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > * < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > s u b t a b < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > 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 : # 8 9 D D F F ; " > * < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > } , < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # F F C B 6 B ; " > s e c o n d < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > * < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > s u b t a b < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > 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 : # 8 9 D D F F ; " > * < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > } , < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > } , < / s p a n > < / s p a n >
< span class = "line" > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # F F C B 6 B ; " > 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 : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#89DDFF;" > < /span><span style="color:#676E95;">/ / There could be another set of microtabs here < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > } < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > } , < / s p a n > < / s p a n >
< span class = "line" > < / 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 - h i d d e n = " t r u e " > # < / 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 = [ o ] ; f u n c t i o n p ( c , r , i , F , u , y ) { r e t u r n n ( ) , a ( " d i v " , n u l l , l ) } c o n s t h = s ( e , [ [ " r e n d e r " , p ] ] ) ; e x p o r t { D a s _ _ p a g e D a t a , h a s d e f a u l t } ;
