Tab Bar Examples
e-tab-bar
<e-tab-bar>
<e-tab label="Tab One">
<e-tab-content>Tab 1 content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e-tab-content>
</e-tab>
<e-tab label="Tab Two" selected>
<e-tab-content>Tab 2 content goes here. Aliquam hendrerit turpis quis interdum porttitor.</e-tab-content>
</e-tab>
<e-tab label="Tab Three" disabled>
<e-tab-content>Tab 3 content goes here. Sequi dolorum animi maiores amet quasi sunt excepturi eius nesciunt odio veritatis fuga labore.</e-tab-content>
</e-tab>
<e-tab label="Tab Four">
<e-tab-content>Tab 4 content goes here. Omnis facilis repellat eveniet inventore cumque vero dicta.</e-tab-content>
</e-tab>
<e-tab label="Tab Five" badge="!">
<e-tab-content>Tab 5 content goes here. Cupiditate reiciendis culpa deleniti perferendis fugit nam.</e-tab-content>
</e-tab>
</e-tab-bar>[icon]
<e-tab-bar>
<e-tab label="Tab One" icon="e-smile">
<e-tab-content>Tab 1 content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e-tab-content>
</e-tab>
<e-tab label="Tab Two" icon="bolt" disabled>
<e-tab-content>Tab 2 content goes here. Sequi dolorum animi maiores amet quasi sunt excepturi eius nesciunt odio veritatis fuga labore.</e-tab-content>
</e-tab>
<e-tab label="Tab Three" icon="e-conversation" badge="5">
<e-tab-content>Tab 3 content goes here. Cupiditate reiciendis culpa deleniti perferendis fugit nam.</e-tab-content>
</e-tab>
</e-tab-bar>[vertical]
<e-tab-bar vertical>
<e-tab label="Tab One" icon="user">
<e-tab-content>Tab 1 content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e-tab-content>
</e-tab>
<e-tab label="Tab Two" icon="bolt" disabled>
<e-tab-content>Tab 2 content goes here. Sequi dolorum animi maiores amet quasi sunt excepturi eius nesciunt odio veritatis fuga labore.</e-tab-content>
</e-tab>
<e-tab label="Tab Three" icon="e-conversation" badge="5">
<e-tab-content>Tab 3 content goes here. Cupiditate reiciendis culpa deleniti perferendis fugit nam.</e-tab-content>
</e-tab>
</e-tab-bar>e-tab-bar
<e-tab-bar>
<e-tab label="Tab One">
<e-tab-content>Tab 1 content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e-tab-content>
</e-tab>
<e-tab label="Tab Two" disabled disabled-tooltip="Tooltip goes here">
<e-tab-content>Tab 2 content goes here. Aliquam hendrerit turpis quis interdum porttitor.</e-tab-content>
</e-tab>
<e-tab label="Tab Three" disabled disabled-tooltip="Tooltip goes here" disabled-type="permission">
<e-tab-content>Tab 3 content goes here. Sequi dolorum animi maiores amet quasi sunt excepturi eius nesciunt odio veritatis fuga labore.</e-tab-content>
</e-tab>
</e-tab-bar>[vertical, icon-hidden, label-visible]
<e-tab-bar vertical icon-hidden label-visible>
<e-tab label="Tab One" icon="user">
<e-tab-content>Tab 1 content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e-tab-content>
</e-tab>
<e-tab label="Tab Two" icon="bolt" disabled>
<e-tab-content>Tab 2 content goes here. Sequi dolorum animi maiores amet quasi sunt excepturi eius nesciunt odio veritatis fuga labore.</e-tab-content>
</e-tab>
<e-tab label="Tab Three" icon="e-conversation" badge="5">
<e-tab-content>Tab 3 content goes here. Cupiditate reiciendis culpa deleniti perferendis fugit nam.</e-tab-content>
</e-tab>
</e-tab-bar>