2024-06-15 05:12:58 +00:00
import { _ as s , c as i , o as a , a5 as t } from "./chunks/framework.Mb1uu3dm.js" ; const y = JSON . parse ( '{"title":"Custom tab layouts","description":"","frontmatter":{},"headers":[],"relativePath":"public/lit/docs/custom-tab-layouts.md","filePath":"public/lit/docs/custom-tab-layouts.md"}' ) , e = { name : "public/lit/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"">
2024-06-02 01:57:02 +00:00
< span class = "line" > < span style = "--shiki-light:#032F62;--shiki-dark:#9ECBFF;" > & quot ; main - display & 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 ; 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 >
< 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:#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:#032F62;--shiki-dark:#9ECBFF;" > & quot ; upgrades & quot ; < / 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 > 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 < a h r e f = " / j s / c o m p o n e n t s . j s " > c o m p o n e n t s . j s < / a > : < / 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 < c o d e > s t a r t D a t a < / c o d e > 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 : T h e l a y e r & # 3 9 ; s u p g r a d e s . T h e a r g u m e n t i s o p t i o n a l , a n d i s a t h e l i s t o f r o w s t h i s c o m p o n e n t s h o u l d i n c l u d e , i f i t d o e s n & # 3 9 ; t h a v e a l l o f t h e m . < / p > < / l i > < l i > < p > m i l e s t o n e s , c h a l l e n g e 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 i s 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 r e e : D i s p l a y s a t r e e . T h e a r g u m e n t i s a n a r r a y o f a r r a y s c o n t a i n i n g t h e n a m e s o f t h e n o d e s i n t h e t r e e ( f i r s t b y r o w , t h e n b y c o l u m n ) < a h r e f = " . / 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 " > S e e h e r e f o r m o r e i n f o r m a t i o n o n t r e e l a y o u t s a n d n o d e s ! < / a > < / 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 , e . g . < c o d e > [ l a y e r , i d ] < / c o d e > < / 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 e n g e , 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 ( o , p , r , u , k , d ) { r e t u r n a ( ) , i ( " 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 { y a s _ _ p a g e D a t a , E a s d e f a u l t } ;
