2024-06-09 22:20:10 +00:00
import { _ as s , c as a , o as i , a9 as t } from "./chunks/framework.D8PMdl4T.js" ; const c = JSON . parse ( '{"title":"Custom tab layouts","description":"","frontmatter":{},"headers":[],"relativePath":"public/kronos/docs/custom-tab-layouts.md","filePath":"public/kronos/docs/custom-tab-layouts.md","lastUpdated":1701136977000}' ) , e = { name : "public/kronos/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 . T h e a r g u m e n t i s t h e a m o u n t o f p r e c i s i o n t o u s e , a l l o w i n g i t t o d i s p l a y n o n - w h o l e n u m b e r 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 > t e x t - i n p u t : A t e x t i n p u t b o x . 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 v a r i a b l e i n p l a y e r [ l a y e r ] t h a t t h e i n p u t i s f o r , p l a y e r [ l a y e r ] [ a r g u m e n t ] ( W o r k s w i t h s t r i n g s , n u m b e r s , a n d D e c i m a l s ! ) < / p > < / l i > < l i > < p > s l i d e r : L e t s t h e u s e r i n p u t a v a l u e w i t h a s l i d e r . T h e a r g u m e n t a 3 - e l e m e n t a r r a y : [ n a m e , m i n , m a x ] . T h e n a m e i s t h e n a m e o f t h e v a r i a b l e i n p l a y e r [ l a y e r ] t h a t t h e i n p u t t h a t t h e i n p u t i s f o r , a n d m i n a n d m a x a r e t h e l i m i t s o f t h e s l i d e r . ( D o e s n o t w o r k f o r D e c i m a l v a l u e s ) < / 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 a r g u m e n t i s a p a i r t h a t i d e n t i f i e s t h e l o c a t i o n i n p l a y e r o f t h e 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 > . & # 3 9 ; l a y e r & # 3 9 ; a l s o a f f e c t s t h e c o l o r o f t h e t o g g l e . < / p > < / l i > < l i > < p > g r i d : D i s p l a y s t h e g r i d a b l e g r i d f o r t h e l a y e r . I f y o u n e e d m o r e t h a n o n e g r i d , u s e a l a y e r p r o x y . < / p > < / l i > < l i > < p > l a y e r - p r o x y : L e t s y o u u s e c o m p o n e n t s f r o m a n o t h e r l a y e r . T h e a r g u m e n t i s a p a i r , < c o d e > [ l a y e r , d a t a ] < / c o d e > , c o n s i s t i n g o f t h e i d o f t h e l a y e r t o p r o x y f r o m , a n d t h e t a b F o r m a t f o r t h e c o m p o n e n t s t o s h o w . ( N o t e : y o u c a n n
