Tab View
Usage notes
Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.
Default
Toggle markup
<coral-tabview>
<coral-tablist>
<coral-tab>Coral Tab 1</coral-tab>
<coral-tab icon="add">Coral Tab 2</coral-tab>
<coral-tab icon="delete" selected="">Coral Tab 3</coral-tab>
<coral-tab disabled="">Disabled</coral-tab>
<coral-tab invalid="">Invalid</coral-tab>
</coral-tablist>
<coral-panelstack class="coral-Well u-coral-margin">
<coral-panel>Aenean faucibus ornare laoreet. Cras luctus purus.</coral-panel>
<coral-panel>Lorem ipsum dolor sit amet.</coral-panel>
<coral-panel>Sed eget eros sit amet nulla ultricies.</coral-panel>
<coral-panel>Fusce nec ante non nibh mollis mollis mollis vitae dui.</coral-panel>
<coral-panel>Aenean faucibus ornare laoreet. Cras luctus purus.</coral-panel>
</coral-panelstack>
</coral-tabview>
Vertical orientation
Toggle markup
<coral-tabview orientation="vertical">
<coral-tablist>
<coral-tab>Text only</coral-tab>
<coral-tab icon="add"></coral-tab>
<coral-tab icon="delete" selected="">Icon and text</coral-tab>
<coral-tab disabled="">Disabled</coral-tab>
<coral-tab invalid="">Invalid</coral-tab>
</coral-tablist>
<coral-panelstack class="coral-Well u-coral-margin">
<coral-panel>Aenean faucibus ornare laoreet. Cras luctus purus.</coral-panel>
<coral-panel>Lorem ipsum dolor sit amet.</coral-panel>
<coral-panel>Sed eget eros sit amet nulla ultricies.</coral-panel>
<coral-panel>Fusce nec ante non nibh mollis mollis mollis vitae dui.</coral-panel>
<coral-panel>Aenean faucibus ornare laoreet. Cras luctus purus.</coral-panel>
</coral-panelstack>
</coral-tabview>
Nested Example
Toggle markup
<coral-tabview>
<coral-tablist>
<coral-tab>Coral Tab 1</coral-tab>
<coral-tab icon="add">Coral Tab 2</coral-tab>
</coral-tablist>
<coral-panelstack class="coral-Well u-coral-margin">
<coral-panel>
<coral-tabview orientation="vertical">
<coral-tablist>
<coral-tab>Coral Tab 1</coral-tab>
<coral-tab icon="add">Coral Tab 2</coral-tab>
</coral-tablist>
<coral-panelstack class="coral-Well u-coral-margin">
<coral-panel>Aenean faucibus ornare laoreet. Cras luctus purus.</coral-panel>
<coral-panel>Lorem ipsum dolor sit amet.</coral-panel>
</coral-panelstack>
</coral-tabview>
</coral-panel>
<coral-panel>
<coral-tabview orientation="vertical">
<coral-tablist>
<coral-tab aria-label="Add" icon="add"></coral-tab>
<coral-tab aria-label="Remove" icon="remove"></coral-tab>
</coral-tablist>
<coral-panelstack class="coral-Well u-coral-margin">
<coral-panel>Aenean faucibus ornare laoreet. Cras luctus purus.</coral-panel>
<coral-panel>Lorem ipsum dolor sit amet.</coral-panel>
</coral-panelstack>
</coral-tabview>
</coral-panel>
</coral-panelstack>
</coral-tabview>