Web Component Usage Tabs is a web component. Add the <bolt-tabs> element containing multiple <bolt-tabs-panel> elements to create a set of tabs. Inside each <bolt-tab-panel> mark the "label" content with the attribute slot="label". Everything else is considered tab "content".
Tab label 1 Tab panel 1 Tab label 2 Tab panel 2 Tab label 3 Tab panel 3
<bolt-tabs> <bolt-tab-panel> <bolt-text slot="label">Tab label 1</bolt-text> <bolt-text>Tab panel 1</bolt-text> </bolt-tab-panel> <bolt-tab-panel> <bolt-text slot="label">Tab label 2</bolt-text> <bolt-text>Tab panel 2</bolt-text> </bolt-tab-panel> <bolt-tab-panel> <bolt-text slot="label">Tab label 3</bolt-text> <bolt-text>Tab panel 3</bolt-text> </bolt-tab-panel> </bolt-tabs>
Prop Usage Configure the tabs with the properties specified in the schema.
Tab label 1 Tab panel 1 Tab label 2 Tab panel 2 Tab label 3 Tab panel 3
<bolt-tabs panel-spacing="small" align="center"> <bolt-tab-panel> <bolt-text slot="label">Tab label 1</bolt-text> <bolt-text>Tab panel 1</bolt-text> </bolt-tab-panel> <bolt-tab-panel> <bolt-text slot="label">Tab label 2</bolt-text> <bolt-text>Tab panel 2</bolt-text> </bolt-tab-panel> <bolt-tab-panel> <bolt-text slot="label">Tab label 3</bolt-text> <bolt-text>Tab panel 3</bolt-text> </bolt-tab-panel> </bolt-tabs>
Advanced Usage Two advanced options are shown below. Automatically show a <bolt-tab-panel> by setting selected-tab on <bolt-tabs> or by adding selected to a single <bolt-tab-panel>.
Tab label 1 Tab panel 1 Tab label 2 Tab panel 2 Tab label 3 Tab panel 3 Tab label 1 Tab panel 1 Tab label 2 Tab panel 2 Tab label 3 Tab panel 3
<!-- Use `selected-tab` to set selected tab --> <bolt-tabs selected-tab="2"> <bolt-tab-panel> <bolt-text slot="label">Tab label 1</bolt-text> <bolt-text>Tab panel 1</bolt-text> </bolt-tab-panel> <bolt-tab-panel> <bolt-text slot="label">Tab label 2</bolt-text> <bolt-text>Tab panel 2</bolt-text> </bolt-tab-panel> <bolt-tab-panel> <bolt-text slot="label">Tab label 3</bolt-text> <bolt-text>Tab panel 3</bolt-text> </bolt-tab-panel> </bolt-tabs> <!-- Use `selected` to set selected tab --> <bolt-tabs> <bolt-tab-panel> <bolt-text slot="label">Tab label 1</bolt-text> <bolt-text>Tab panel 1</bolt-text> </bolt-tab-panel> <bolt-tab-panel selected> <bolt-text slot="label">Tab label 2</bolt-text> <bolt-text>Tab panel 2</bolt-text> </bolt-tab-panel> <bolt-tab-panel> <bolt-text slot="label">Tab label 3</bolt-text> <bolt-text>Tab panel 3</bolt-text> </bolt-tab-panel> </bolt-tabs>
Debug Panel