2024-06-28 04:15:48 +00:00
import { _ as s , q as i , p as a , ag as t } from "./chunks/framework.DvHfxfnp.js" ; const E = JSON . parse ( '{"title":"Custom tab layouts","description":"","frontmatter":{},"headers":[],"relativePath":"public/gamedevtree/docs/custom-tab-layouts.md","filePath":"public/gamedevtree/docs/custom-tab-layouts.md"}' ) , e = { name : "public/gamedevtree/docs/custom-tab-layouts.md" } , n = t ( ` <h1 id="custom-tab-layouts" tabindex="-1">Custom tab layouts <a class="header-anchor" href="#custom-tab-layouts" aria-label="Permalink to "Custom tab layouts""> </a></h1><p>Note: If you are using subtabs, tabFormat is used differently, but you still use the same format within each subtabs. <a href="./subtabs-and-microtabs">See here for more on subtabs</a></p><p>Custom tab layouts can be used to do basically anything in a tab window, especially combined with the "style" layer feature. The tabFormat feature is an array of things, like this:</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 style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"main-display"</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:#24292E;--shiki-dark:#E1E4E8;" > [ < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 0 3 2 F 6 2 ; - - s h i k i - d a r k : # 9 E C B F F ; " > & q u o t ; p r e s t i g e - b u t t o n & q u o t ; < / 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 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 ; " > f u n c t i o n < / 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 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 ; " > r e t u r n < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 0 3 2 F 6 2 ; - - s h i k i - d a r k : # 9 E C B F F ; " > & q u o t ; M e l t y o u r p o i n t s i n t o & q u o t ; < / 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:#032F62;--shiki-dark:#9ECBFF;" > & quot ; blank & 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;" > [ < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 0 3 2 F 6 2 ; - - s h i k i - d a r k : # 9 E C B F F ; " > & q u o t ; d i s p l a y - t e x t & q u o t ; < / 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;" > function < / 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 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 ; " > r e t u r n < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 0 3 2 F 6 2 ; - - s h i k i - d a r k : # 9 E C B F F ; " > & # 3 9 ; I h a v e & # 3 9 ; < / 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 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 ; " > f o r m a t < / 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 ; " > ( p l a y e r . p o i n t 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 s t y l e = " - - s h i k i - l i g h t : # 0 3 2 F 6 2 ; - - s h i k i - d a r k : # 9 E C B F F ; " > & # 3 9 ; p o i n t y p o i n t s ! & # 3 9 ; < / 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;" > { < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 0 3 2 F 6 2 ; - - s h i k i - d a r k : # 9 E C B F F ; " > & q u o t ; c o l o r & q u o t ; < / 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 s t y l e = " - - s h i k i - l i g h t : # 0 3 2 F 6 2 ; - - s h i k i - d a r k : # 9 E C B F F ; " > & q u o t ; r e d & q u o t ; < / 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 s t y l e = " - - s h i k i - l i g h t : # 0 3 2 F 6 2 ; - - s h i k i - d a r k : # 9 E C B F F ; " > & q u o t ; f o n t - s i z e & q u o t ; < / 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 s t y l e = " - - s h i k i - l i g h t : # 0 3 2 F 6 2 ; - - s h i k i - d a r k : # 9 E C B F F ; " > & q u o t ; 3 2 p x & q u o t ; < / 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 s t y l e = " - - s h i k i - l i g h t : # 0 3 2 F 6 2 ; - - s h i k i - d a r k : # 9 E C B F F ; " > & q u o t ; f o n t - f a m i l y & q u o t ; < / 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 s t y l e = " - - s h i k i - l i g h t : # 0 3 2 F 6 2 ; - - s h i k i - d a r k : # 9 E C B F F ; " > & q u o t ; C o m i c S a n s M S & q u o t ; < / 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:#032F62;--shiki-dark:#9ECBFF;" > & quot ; blank & 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;" > [ < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 0 3 2 F 6 2 ; - - s h i k i - d a r k : # 9 E C B F F ; " > & q u o t ; t o g g l e & q u o t ; < / 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 s t y l e = " - - s h i k i - l i g h t : # 0 3 2 F 6 2 ; - - s h i k i - d a r k : # 9 E C B F F ; " > & q u o t ; c & q u o t ; < / 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 s t y l e = " - - s h i k i - l i g h t : # 0 3 2 F 6 2 ; - - s h i k i - d a r k : # 9 E C B F F ; " > & q u o t ; b e e p & q u o t ; < / 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:#032F62;--shiki-dark:#9ECBFF;" > & quot ; milestones & 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 s t y l e = " - - s h i k i - l i g h t : # 0 3 2 F 6 2 ; - - s h i k i - d a r k : # 9 E C B F F ; " > & q u o t ; b l a n k & q u o t ; < / 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 s t y l e = " - - s h i k i - l i g h t : # 0 3 2 F 6 2 ; - - s h i k i - d a r k : # 9 E C B F F ; " > & q u o t ; b l a n k & q u o t ; < / 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 s t y l e = " - - s h i k i - l i g h t : # 0 3 2 F 6 2 ; - - s h i k i - d a r k : # 9 E C B F F ; " > & q u o t ; u p g r a d e s & q u o t ; < / 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 > < / c o d e > < / p r e > < / d i v > < p > I t i s a l i s t o f c o m p o n e n t s , w h i c h c a n b e e i t h e r j u s t a n a m e , o r a n a r r a y w i t h a r g u m e n t s . I f i t & # 3 9 ; s a n a r r a y , t h e f i r s t i t e m i s t h e n a m e o f t h e c o m p o n e n t , t h e s e c o n d i s t h e d a t a p a s s e d i n t o i t , a n d t h e t h i r d ( o p t i o n a l ) a p p l i e s a C S S s t y l e t o i t w i t h a & 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 . < / p > < p > T h e s e a r e t h e e x i s t i n g c o m p o n e n t s , b u t y o u c a n c r e a t e m o r e i n v . j s : < / p > < u l > < l i > < p > d i s p l a y - t e x t : D i s p l a y s s o m e t e x t ( c a n u s e b a s i c H T M L ) . T h e a r g u m e n t i s t h e t e x t t o d i s p l a y . I t c a n a l s o b e a f u n c t i o n t h a t r e t u r n s u p d a t i n g t e x t . < / p > < / l i > < l i > < p > r a w - h t m l : D i s p l a y s s o m e b a s i c H T M L , c a n a l s o b e a f u n c t i o n . < / p > < / l i > < l i > < p > b l a n k : A d d s e m p t y s p a c e . T h e d e f a u l t d i m e n s i o n s a r e 8 p x x 1 7 p x . T h e a r g u m e n t c h a n g e s t h e d i m e n s i o n s . I f i t & # 3 9 ; s a s i n g l e v a l u e ( e . g . & q u o t ; 2 0 p x & q u o t ; ) , t h a t d e t e r m i n e s t h e h e i g h t . I f y o u h a v e a p a i r o f a r g u m e n t s , t h e f i r s t i s w i d t h a n d t h e s e c o n d i s h e i g h t . < / p > < / l i > < l i > < p > r o w : D i s p l a y a l i s t o f c o m p o n e n t s h o r i z o n t a l l y . T h e a r g u m e n t i s a n a r r a y o f c o m p o n e n t s i n t h e t a b l a y o u t f o r m a t . < / p > < / l i > < l i > < p > c o l u m n : D i s p l a y a l i s t o f c o m p o n e n t s v e r t i c a l l y . T h e a r g u m e n t i s a n a r r a y o f c o m p o n e n t s i n t h e t a b l a y o u t f o r m a t . T h i s i s u s e f u l t o d i s p l a y c o l u m n s w i t h i n a r o w . < / p > < / l i > < l i > < p > m a i n - d i s p l a y : T h e t e x t t h a t d i s p l a y s t h e m a i n c u r r e n c y f o r t h e l a y e r a n d i t s e f f e c t s . < / p > < / l i > < l i > < p > r e s o u r c e - d i s p l a y : T h e t e x t t h a t d i s p l a y s t h e c u r r e n c y t h a t t h i s l a y e r i s b a s e d o n , a s w e l l a s t h e b e s t a n d / o r t o t a l v a l u e s f o r t h i s l a y e r & # 3 9 ; s p r e s t i g e c u r r e n c y ( i f t h e y a r e p u t i n s t a r t D a t a f o r t h i s l a y e r ) < / p > < / l i > < l i > < p > p r e s t i g e - b u t t o n : T h e a r g u m e n t i s a s t r i n g t h a t t h e p r e s t i g e b u t t o n s h o u l d s a y b e f o r e t h e a m o u n t o f c u r r e n c y y o u w i l l g a i n . I t c a n a l s o b e a f u n c t i o n t h a t r e t u r n s u p d a t i n g t e x t . < / p > < / l i > < l i > < p > u p g r a d e s , m i l e s t o n e s , c h a l l s , a c h i e v e m e n t s : D i s p l a y t h e u p g r a d e s , m i l e s t o n e s , a n d c h a l l e n g e s f o r a l a y e r , a s a p p r o p r i a t e . < / p > < / l i > < l i > < p > b u y a b l e s , c l i c k a b l e s : D i s p l a y a l l o f t h e b u y a b l e s / c l i c k a b l e s f o r t h i s l a y e r , a s a p p r o p r i a t e . T h e a r g u m e n t o p t i o n a l , a n d i s t h e s i z e o f t h e b o x e s i n p i x e l s . < / p > < / l i > < l i > < p > m i c r o t a b s : D i s p l a y a s e t o f s u b t a b s f o r a n a r e a . T h e a r g u m e n t i s t h e n a m e o f t h e s e t o f m i c r o t a b s 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 . < / p > < / l i > < l i > < p > b a r : D i s p l a y a b a r . T h e a r g u m e n t i s t h e i d o f t h e b a r t o d i s p l a y . < / p > < / l i > < l i > < p > i n f o b o x : D i s p l a y a n i n f o b o x . T h e a r g u m e n t i s t h e i d o f t h e i n f o b o x t o d i s p l a y . < / p > < / l i > < l i > < p > t o g g l e : A t o g g l e b u t t o n t h a t t o g g l e s a b o o l v a l u e . T h e d a t a i s a p a i r t h a t i d e n t i f i e s w h a t b o o l t o t o g g l e , [ l a y e r , i d ] < / p > < / l i > < / u l > < p > T h e r e s t o f t h e c o m p o n e n t s a r e s u b - c o m p o n e n t s . T h e y c a n b e u s e d j u s t l i k e o t h e r c o m p o n e n t s , b u t a r e t y p i c a l l y p a r t o f a n o t h e r c o m p o n e n t . < / p > < u l > < l i > < p > u p g r a d e , m i l e s t o n e , c h a l l , b u y a b l e , c l i c k a b l e , a c h i e v e m e n t : A n i n d i v i d u a l u p g r a d e , c h a l l e n g e , e t c . T h e a r g u m e n t i s t h e i d . T h i s c a n b e u s e d i f y o u w a n t t o h a v e u p g r a d e s s p l i t u p a c r o s s m u l t i p l e s u b t a b s , f o r e x a m p l e . < / p > < / l i > < l i > < p > r e s p e c - b u t t o n , m a s t e r - b u t t o n : T h e r e s p e c a n d m a s t e r b u t t o n s f o r b u y a b l e s a n d c l i c k a b l e s , r e s p e c t i v e l y . < / p > < / l i > < l i > < p > s e l l - o n e , s e l l - a l l : T h e & q u o t ; s e l l o n e & q u o t ; a n d & q u o t ; s e l l a l l & q u o t ; f o r b u y a b l e s , r e s p e c t i v e l y . T h e a r g u m e n t i s t h e i d o f t h e b u y a b l e . < / p > < / l i > < / u l > ` , 9 ) , l = [ n ] ; f u n c t i o n h ( p , o , r , k , u , d ) { r e t u r n a ( ) , i ( " d i v " , n u l l , l ) } c o n s t c = s ( e , [ [ " r e n d e r " , h ] ] ) ; e x p o r t { E a s _ _ p a g e D a t a , c a s d e f a u l t } ;