@@ -25,7 +25,10 @@ export interface StoryKnobs {
25
25
26
26
const styles = css `
27
27
[role='tabpanel']:not([hidden]) {
28
- font-family: Roboto, Material Sans, system-ui;
28
+ font-family:
29
+ Roboto,
30
+ Material Sans,
31
+ system-ui;
29
32
}
30
33
31
34
[role='tabpanel']:not(.subtabs) {
@@ -56,7 +59,7 @@ const primary: MaterialStoryInit<StoryKnobs> = {
56
59
return html `
57
60
< md-tabs
58
61
aria-label ="Primary tabs "
59
- .activeTabIndex =${ knobs . activeTabIndex }
62
+ active-tab-index =${ knobs . activeTabIndex }
60
63
.autoActivate =${ knobs . autoActivate }
61
64
${ setupTabPanels ( ) } >
62
65
< md-primary-tab
@@ -119,7 +122,7 @@ const secondary: MaterialStoryInit<StoryKnobs> = {
119
122
return html `
120
123
< md-tabs
121
124
aria-label ="Secondary tabs "
122
- .activeTabIndex =${ knobs . activeTabIndex }
125
+ active-tab-index =${ knobs . activeTabIndex }
123
126
.autoActivate =${ knobs . autoActivate }
124
127
${ setupTabPanels ( ) } >
125
128
< md-secondary-tab id ="tab-one " aria-controls ="panel-one ">
@@ -160,7 +163,7 @@ const scrolling: MaterialStoryInit<StoryKnobs> = {
160
163
return html ` < md-tabs
161
164
aria-label ="A tab bar that scrolls "
162
165
class ="scrolling "
163
- .activeTabIndex =${ knobs . activeTabIndex }
166
+ active-tab-index =${ knobs . activeTabIndex }
164
167
.autoActivate =${ knobs . autoActivate } >
165
168
${ new Array ( 10 ) . fill ( html `
166
169
< md-primary-tab .inlineIcon =${ inlineIcon } >
@@ -212,7 +215,7 @@ const custom: MaterialStoryInit<StoryKnobs> = {
212
215
< md-tabs
213
216
aria-label ="A custom themed tab bar "
214
217
class ="custom "
215
- .activeTabIndex =${ knobs . activeTabIndex }
218
+ active-tab-index =${ knobs . activeTabIndex }
216
219
.autoActivate =${ knobs . autoActivate } >
217
220
< md-primary-tab id ="tab-one " aria-controls ="panel-one ">
218
221
${ tabContent ( 'flight' , 'Travel' ) }
@@ -252,7 +255,7 @@ const primaryAndSecondary: MaterialStoryInit<StoryKnobs> = {
252
255
return html `
253
256
< md-tabs
254
257
aria-label ="Primary tabs "
255
- .activeTabIndex =${ knobs . activeTabIndex }
258
+ active-tab-index =${ knobs . activeTabIndex }
256
259
.autoActivate =${ knobs . autoActivate }
257
260
${ setupTabPanels ( ) } >
258
261
< md-primary-tab .inlineIcon =${ inlineIcon } aria-controls ="movies">
@@ -269,7 +272,7 @@ const primaryAndSecondary: MaterialStoryInit<StoryKnobs> = {
269
272
< div role ="tabpanel " id ="movies " class ="subtabs " aria-label ="Movies ">
270
273
< md-tabs
271
274
aria-label ="Secondary tabs for movies "
272
- .activeTabIndex =${ knobs . activeTabIndex }
275
+ active-tab-index =${ knobs . activeTabIndex }
273
276
.autoActivate =${ knobs . autoActivate }
274
277
${ setupTabPanels ( ) } >
275
278
< md-secondary-tab aria-controls ="star-wars "
@@ -298,7 +301,7 @@ const primaryAndSecondary: MaterialStoryInit<StoryKnobs> = {
298
301
hidden >
299
302
< md-tabs
300
303
aria-label ="Secondary tabs for photos "
301
- .activeTabIndex =${ knobs . activeTabIndex }
304
+ active-tab-index =${ knobs . activeTabIndex }
302
305
.autoActivate =${ knobs . autoActivate } >
303
306
< md-secondary-tab aria-controls ="yosemite "> Yosemite</ md-secondary-tab >
304
307
< md-secondary-tab aria-controls ="mona-lisa "
@@ -327,7 +330,7 @@ const primaryAndSecondary: MaterialStoryInit<StoryKnobs> = {
327
330
< div role ="tabpanel " id ="music " class ="subtabs " aria-label ="Music " hidden >
328
331
< md-tabs
329
332
aria-label ="Secondary tabs for music "
330
- .activeTabIndex =${ knobs . activeTabIndex }
333
+ active-tab-index =${ knobs . activeTabIndex }
331
334
.autoActivate =${ knobs . autoActivate }
332
335
${ setupTabPanels ( ) } >
333
336
< md-secondary-tab aria-controls ="rock "> Rock</ md-secondary-tab >
@@ -413,7 +416,7 @@ const dynamic: MaterialStoryInit<StoryKnobs> = {
413
416
</ div >
414
417
< md-tabs
415
418
class ="scrolling "
416
- .activeTabIndex =${ knobs . activeTabIndex }
419
+ active-tab-index =${ knobs . activeTabIndex }
417
420
.autoActivate =${ knobs . autoActivate } >
418
421
< md-primary-tab .inlineIcon =${ inlineIcon } > Tab 1 </ md-primary-tab >
419
422
< md-primary-tab .inlineIcon =${ inlineIcon } > Tab 2 </ md-primary-tab >
0 commit comments