2024-06-18 17:38:35 +00:00
import { _ as s , c as a , o as t , a5 as i } from "./chunks/framework.BIC8H_hJ.js" ; const u = JSON . parse ( '{"title":"Subtabs and Microtabs","description":"","frontmatter":{},"headers":[],"relativePath":"public/lit/docs/subtabs-and-microtabs.md","filePath":"public/lit/docs/subtabs-and-microtabs.md"}' ) , n = { name : "public/lit/docs/subtabs-and-microtabs.md" } , e = i ( ` <h1 id="subtabs-and-microtabs" tabindex="-1">Subtabs and Microtabs <a class="header-anchor" href="#subtabs-and-microtabs" aria-label="Permalink to "Subtabs and Microtabs"">
2024-06-17 04:46:30 +00:00
< span class = "line" > < span style = "--shiki-light:#032F62;--shiki-dark:#9ECBFF;" > & quot ; Main tab & 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;" > content : [ tab format things ] , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#24292E;--shiki-dark:#E1E4E8;" > * subtab features * < / 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:#032F62;--shiki-dark:#9ECBFF;" > & quot ; Other tab & 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;" > content : [ tab format things ] , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#24292E;--shiki-dark:#E1E4E8;" > * subtab features * < / 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 > M i c r o t a b s a r e d e f i n e d s i m i l a r l y , a n d u s e t h e s a m e f e a t u r e s , b u t a r e d e f i n e d 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 . E a c h e n t r y i s a g r o u p o f t a b s w h i c h w i l l a p p e a r i n a m i c r o t a b s c o m p o n e n t . T h e f i r s t s e t , & q u o t ; s t u f f & q u o t ; , h a s 2 t a b s , a n d t h e s e c o n d , & q u o t ; o t h e r S t u f f & q u o t ; , h a s n o n e . < / p > < d i v c l a s s = " l a n g u a g e - j s v p - a d a p t i v e - t h e m e " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > j s < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s g i t h u b - l i g h t g i t h u b - d a r k v p - c o d e " t a b i n d e x = " 0 " > < 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 = " - - 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 ; " > m i c r o t a b s < / 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;" > stuff < / 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;" > first < / 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;" > content < / 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 ; " > : [ t a b f o r m a t t h i n g s ] , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#D73A49;--shiki-dark:#F97583;" > * < / 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 u b t a b f e a t u r e 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 >
< 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:#6F42C1;--shiki-dark:#B392F0;" > second < / 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;" > content < / 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 ; " > : [ t a b f o r m a t t h i n g s ] , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#D73A49;--shiki-dark:#F97583;" > * < / 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 u b t a b f e a t u r e 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 >
< 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;" > } , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#6F42C1;--shiki-dark:#B392F0;" > otherStuff < / 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:#6A737D;--shiki-dark:#6A737D;" > // There could be another set of microtabs here</span></span>
< 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;" > } < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > N o r m a l s u b t a b s a n d m i c r o t a b s u b t a b s b o t h u s e t h e s a m e f e a t u r e s : < / p > < h 1 i d = " f e a t u r e s " t a b i n d e x = " - 1 " > F e a t u r e s : < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # f e a t u r e s " a r i a - l a b e l = " P e r m a l i n k t o & q u o t ; F e a t u r e s : & q u o t ; " > < / a > < / h 1 > < u l > < l i > < p > c o n t e n t : T h e t a b l a y o u t c o d e f o r t h e s u b t a b , i n < a h r e f = " . / c u s t o m - t a b - l a y o u t s " > t h e t a b l a y o u t f o r m a t < / a > . < / p > < / l i > < l i > < p > 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 i e s C S S t o t h e w h o l e s u b t a b w h e n s w i t c h e d t o , i n t h e f o r m o f a n & 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 , 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 > b u t t o n 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 C S S o b j e c t , w h i c h a f f e c t s t h e a p p e a r a n c e o f t h e b u t t o n f o r t h a t s u b t a b . < / 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 t o d e t e r m i n e i f t h e b u t t o n f o r t h i s s u b t a b s h o u l d b e v i s i b l e . B y d e f a u l t , a s u b t a b i s a l w a y s u n l o c k e d . Y o u c a n & # 3 9 ; t u s e t h e & q u o t ; t h i s & q u o t ; k e y w o r d i n t h i s f u n c t i o n . < / p > < / l i > < l i > < p > s h o u l d N o t i f y ( ) : < s t r o n g > o p t i o n a l < / s t r o n g > , i f t r u e , t h e t a b b u t t o n w i l l b e h i g h l i g h t e d t o n o t i f y t h e p l a y e r t h a t t h e r e i s s o m e t h i n g t h e r e . < / p > < / l i > < l i > < p > e m b e d L a y e r : < s t r o n g > S I G N I F I C A N T < / s t r o n g > , t h e i d o f a n o t h e r l a y e r . I f y o u h a v e t h i s , i t w i l l o v e r r i d e & q u o t ; c o n t e n t & q u o t ; , & q u o t ; s t y l e & q u o t ; a n d & q u o t ; s h o u l d N o t i f y & q u o t ; , i n s t e a d d i s p l a y i n g t h e e n t i r e l a y e r i n t h e s u b t a b . < / p > < / l i > < / u l > ` , 9 ) , l = [ e ] ; f u n c t i o n h ( p , o , r , k , c , d ) { r e t u r n t ( ) , a ( " d i v " , n u l l , l ) } c o n s t E = s ( n , [ [ " r e n d e r " , h ] ] ) ; 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 } ;
