2024-06-20 11:29:31 +00:00
import { _ as s , c as i , o as a , ag as t } from "./chunks/framework.VBE0TPts.js" ; const u = JSON . parse ( '{"title":"Bars","description":"","frontmatter":{},"headers":[],"relativePath":"public/lit/docs/bars.md","filePath":"public/lit/docs/bars.md"}' ) , e = { name : "public/lit/docs/bars.md" } , n = t ( ` <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 shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bars</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:#6F42C1;--shiki-dark:#B392F0;" > bigBar < / 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:#6F42C1;--shiki-dark:#B392F0;" > direction < / 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 0 5 C C 5 ; - - s h i k i - d a r k : # 7 9 B 8 F F ; " > R I G H 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:#6F42C1;--shiki-dark:#B392F0;" > width < / 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 0 5 C C 5 ; - - s h i k i - d a r k : # 7 9 B 8 F F ; " > 2 0 0 < / 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:#6F42C1;--shiki-dark:#B392F0;" > height < / 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 0 5 C C 5 ; - - s h i k i - d a r k : # 7 9 B 8 F F ; " > 5 0 < / 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:#6F42C1;--shiki-dark:#B392F0;" > progress < / 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 0 5 C C 5 ; - - s h i k i - d a r k : # 7 9 B 8 F F ; " > 0 < / 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;" > etc < / 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 >
< span class = "line" > < span style = "--shiki-light:#24292E;--shiki-dark:#E1E4E8;" > etc < / 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 > 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 ) , l = [ n ] ; f u n c t i o n r ( p , h , o , d , k , c ) { 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 " , r ] ] ) ; e x p o r t { u a s _ _ p a g e D a t a , E a s d e f a u l t } ;