Tab List
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-tablist>
<coral-tab>Tab One</coral-tab>
<coral-tab style="width:100px">A truncated tab label</coral-tab>
<coral-tab icon="comment">Tab Two</coral-tab>
<coral-tab aria-label="Home" icon="home"></coral-tab>
<coral-tab disabled="">Disabled</coral-tab>
<coral-tab invalid="">Invalid</coral-tab>
<coral-tab invalid="" disabled="">Invalid + Disabled</coral-tab>
</coral-tablist>
Small size
Toggle markup
<coral-tablist size="S">
<coral-tab>Tab One</coral-tab>
<coral-tab icon="comment">Tab Two</coral-tab>
<coral-tab aria-label="Home" icon="home"></coral-tab>
<coral-tab disabled="">Disabled</coral-tab>
<coral-tab invalid="">Invalid</coral-tab>
<coral-tab invalid="" disabled="">Invalid + Disabled</coral-tab>
</coral-tablist>
Large size
Toggle markup
<coral-tablist size="L">
<coral-tab>Tab One</coral-tab>
<coral-tab icon="comment">Tab Two</coral-tab>
<coral-tab aria-label="Home" icon="home"></coral-tab>
<coral-tab disabled="">Disabled</coral-tab>
<coral-tab invalid="">Invalid</coral-tab>
<coral-tab invalid="" disabled="">Invalid + Disabled</coral-tab>
</coral-tablist>
Icons
Toggle markup
<coral-tablist>
<coral-tab icon="home" target="#panel_0"></coral-tab>
<coral-tab target="#panel_1">Tab One</coral-tab>
<coral-tab icon="delete" target="#panel_3">Tab Two</coral-tab>
<coral-tab target="#panel_4" disabled="">Disabled</coral-tab>
<coral-tab icon="alert" target="#panel_5" invalid="">Invalid</coral-tab>
<coral-tab icon="alert" target="#panel_6" invalid="" disabled="">Invalid + Disabled</coral-tab>
</coral-tablist>
Vertical default
Toggle markup
<coral-tablist orientation="vertical">
<coral-tab>Tab One</coral-tab>
<coral-tab icon="comment">Tab Two</coral-tab>
<coral-tab aria-label="Home" icon="home"></coral-tab>
<coral-tab disabled="">Disabled</coral-tab>
<coral-tab invalid="">Invalid</coral-tab>
<coral-tab invalid="" disabled="">Invalid + Disabled</coral-tab>
</coral-tablist>
Vertical small size
Toggle markup
<coral-tablist orientation="vertical" size="S">
<coral-tab>Tab One</coral-tab>
<coral-tab icon="comment">Tab Two</coral-tab>
<coral-tab aria-label="Home" icon="home"></coral-tab>
<coral-tab disabled="">Disabled</coral-tab>
<coral-tab invalid="">Invalid</coral-tab>
<coral-tab invalid="" disabled="">Invalid + Disabled</coral-tab>
</coral-tablist>
Vertical large size
Toggle markup
<coral-tablist orientation="vertical" size="L">
<coral-tab>Tab One</coral-tab>
<coral-tab icon="comment">Tab Two</coral-tab>
<coral-tab aria-label="Home" icon="home"></coral-tab>
<coral-tab disabled="">Disabled</coral-tab>
<coral-tab invalid="">Invalid</coral-tab>
<coral-tab invalid="" disabled="">Invalid + Disabled</coral-tab>
</coral-tablist>
Vertical Icons
Toggle markup
<coral-tablist orientation="vertical">
<coral-tab icon="home" target="#panel_0"></coral-tab>
<coral-tab target="#panel_1">Tab One</coral-tab>
<coral-tab icon="delete" target="#panel_3">Tab Two</coral-tab>
<coral-tab target="#panel_4" disabled="">Disabled</coral-tab>
<coral-tab icon="alert" target="#panel_5" invalid="">Invalid</coral-tab>
<coral-tab icon="alert" target="#panel_6" invalid="" disabled="">Invalid + Disabled</coral-tab>
</coral-tablist>