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>