2023-04-20 22:23:08 +00:00
import { _ as s , c as a , o as n , d as o } from "./app.c95a51e0.js" ; const D = JSON . parse ( '{"title":"Subtabs and Microtabs","description":"","frontmatter":{},"headers":[],"relativePath":"public/lit/docs/subtabs-and-microtabs.md","lastUpdated":null}' ) , t = { name : "public/lit/docs/subtabs-and-microtabs.md" } , l = o ( ` <h1 id="subtabs-and-microtabs" tabindex="-1">Subtabs and Microtabs <a class="header-anchor" href="#subtabs-and-microtabs" aria-hidden="true">#</a></h1><p>Subtabs are separate sections of a tab that you can view by selecting one at the top of the tab. Microtabs are smaller areas that function in much the same way. You can also embed layers inside of subtabs/microtabs.</p><p>Subtabs are defined by using the tab format like this, where each element of tabFormat is given the name of that subtab:</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#FFCB6B;">tabFormat</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
2022-10-05 00:48:27 +00:00
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # C 3 E 8 8 D ; " > M a i n t a b < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > : < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > content < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > [ < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > t a b < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > f o r m a t < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > t h i n g s < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > ] < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > , < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > * subtab features * < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > } , < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # C 3 E 8 8 D ; " > O t h e r t a b < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > : < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > content < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > [ < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > t a b < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > f o r m a t < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > t h i n g s < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > ] < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > , < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > * subtab features * < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > } , < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > e t c < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#89DDFF;" > } < / s p a n > < / s p a n >
2022-11-12 03:03:09 +00:00
< span class = "line" > < / 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 " > < 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 " > < 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 : # F F C B 6 B ; " > m i c r o t a b s < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
2022-10-05 00:48:27 +00:00
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # F F C B 6 B ; " > s t u f f < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # F F C B 6 B ; " > f i r s t < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # F F C B 6 B ; " > c o n t e n t < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > [ < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > t a b < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > f o r m a t < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > t h i n g s < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > ] < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > , < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > * < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > s u b t a b < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > f e a t u r e s < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > * < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > } , < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # F F C B 6 B ; " > s e c o n d < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # F F C B 6 B ; " > c o n t e n t < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > [ < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > t a b < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > f o r m a t < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > t h i n g s < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > ] < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > , < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > * < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > s u b t a b < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > f e a t u r e s < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > * < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > } < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > } , < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # F F C B 6 B ; " > o t h e r S t u f f < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#89DDFF;" > < /span><span style="color:#676E95;">/ / There could be another set of microtabs here < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > } < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#89DDFF;" > } < / s p a n > < / s p a n >
2022-11-12 03:03:09 +00:00
< span class = "line" > < / 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 - h i d d e n = " t r u e " > # < / 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 ) , e = [ l ] ; f u n c t i o n p ( r , c , i , y , F , u ) { r e t u r n n ( ) , a ( " d i v " , n u l l , e ) } c o n s t h = s ( t , [ [ " r e n d e r " , p ] ] ) ; e x p o r t { D a s _ _ p a g e D a t a , h a s d e f a u l t } ;
