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 u = JSON . parse ( '{"title":"Bars","description":"","frontmatter":{},"headers":[],"relativePath":"public/lit/docs/bars.md","filePath":"public/lit/docs/bars.md","lastUpdated":1701137263000}' ) , o = { name : "public/lit/docs/bars.md" } , l = e ( ` <h1 id="bars" tabindex="-1">Bars <a class="header-anchor" href="#bars" aria-label="Permalink to "Bars""> </a></h1><p>Bars let you display information in a more direct way. It can be a progress bar, health bar, capacity gauge, or anything else.</p><p>Bars are defined like other Big Features:</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:#B392F0;">bars</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 : # B 3 9 2 F 0 ; " > b i g B a r < / 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 ; " > d i r e c t i o n < / 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 s t y l e = " c o l o r : # 7 9 B 8 F F ; " > R I G H 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 : # B 3 9 2 F 0 ; " > w i d t h < / 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 s t y l e = " c o l o r : # 7 9 B 8 F F ; " > 2 0 0 < / 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 ; " > h e i g h 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 s t y l e = " c o l o r : # 7 9 B 8 F F ; " > 5 0 < / 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 ; " > p r o g r e s 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 s t y l e = " c o l o r : # 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 = " 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 : # 7 9 B 8 F F ; " > 0 < / 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;" > etc < / 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;" > 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 : # 6 F 4 2 C 1 ; " > b a r 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 ; " > b i g B a r < / 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 ; " > d i r e c t i o n < / 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 s t y l e = " c o l o r : # 0 0 5 C C 5 ; " > R I G H 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 : # 6 F 4 2 C 1 ; " > w i d t h < / 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 s t y l e = " c o l o r : # 0 0 5 C C 5 ; " > 2 0 0 < / 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 ; " > h e i g h 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 s t y l e = " c o l o r : # 0 0 5 C C 5 ; " > 5 0 < / 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 ; " > p r o g r e s 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 s t y l e = " c o l o r : # D 7 3 A 4 9 ; " > r e t u r n < / 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 s t y l e = " c o l o r : # 0 0 5 C C 5 ; " > 0 < / 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;" > etc < / 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;" > 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 > F e a t u r e s : < / p > < u l > < l i > < p > d i r e c t i o n : U P , D O W N , L E F T , o r R I G H T ( n o t s t r i n g s ) . D e t e r m i n e s t h e d i r e c t i o n t h a t t h e b a r i s f i l l e d a s i t p r o g r e s s e s . R I G H T m e a n s f r o m l e f t t o r i g h t . < / p > < / l i > < l i > < p > w i d t h , h e i g h t : T h e s i z e i n p i x e l s o f t h e b a r , b u t a s n u m b e r s ( n o & q u o t ; p x & q u o t ; a t t h e e n d ) . < / p > < / l i > < l i > < p > p r o g r e s s ( ) : A f u n c t i o n t h a t r e t u r n s t h e p o r t i o n o f t h e b a r t h a t i s f i l l e d , f r o m & q u o t ; e m p t y & q u o t ; a t 0 t o & q u o t ; f u l l & q u o t ; a t 1 , u p d a t i n g a u t o m a t i c a l l y . ( N o t h i n g b a d h a p p e n s i f t h e v a l u e g o e s o u t o f t h e s e b o u n d s , a n d i t c a n b e a n u m b e r o r < c o d e > D e c i m a l < / c o d e > ) < / p > < / l i > < l i > < p > d i s p l a y ( ) : < 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 h a t r e t u r n s t e x t t o b e d i s p l a y e d o n t o p o f t h e b a r , c a n u s e H T M L . < / 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 r e t u r n i n g a b o o l t o d e t e r m i n e i f t h e b a r i s v i s i b l e o r n o t . D e f a u l t i s u n l o c k e d . < / p > < / l i > < l i > < p > b a s e S t y l e , f i l l S t y l e , b o r d e r S t y l e , t e x t 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 y C S S t o t h e u n f i l l e d p o r t i o n , f i l l e d p o r t i o n , b o r d e r , a n d d i s p l a y t e x t o n t h e b a r , i n t h e f o r m o f a n o b j e c 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 > l a y e r : < s t r o n g > a s s i g n e d a u t o m a g i c a l l y < / s t r o n g > . I t & # 3 9 ; s t h e s a m e v a l u e a s t h e n a m e o f t h i s l a y e r , s o y o u c a n d o < c o d e > p l a y e r [ t h i s . l a y e r ] . p o i n t s < / c o d e > o r s i m i l a r . < / p > < / l i > < l i > < p > i d : < s t r o n g > a s s i g n e d a u t o m a g i c a l l y < / s t r o n g > . I t & # 3 9 ; s t h e & q u o t ; k e y & q u o t ; w h i c h t h e b a r w a s s t o r e d u n d e r , f o r c o n v e n i e n t a c c e s s . T h e b a r i n t h e e x a m p l e & # 3 9 ; s i d i s & q u o t ; b i g B a r & q u o t ; . < / p > < / l i > < / u l > ` , 6 ) , t = [ l ] ; f u n c t i o n p ( r , i , c , y , E , d ) { r e t u r n a ( ) , n ( " d i v " , n u l l , t ) } c o n s t b = s ( o , [ [ " r e n d e r " , p ] ] ) ; e x p o r t { u a s _ _ p a g e D a t a , b a s d e f a u l t } ;