Vertical Tab (CSS) Migration
Reason for Deprecation
Vertical Tab is a hybrid component, that only show the tab header changes, but doesn't handles the content change logic.
New component to use
Tab-bar Benefits
- It's a part of the Tab component.
- It can be asserted with an attribute.
- The label and icon visibility are changeable with an attribute.
- It supports keyboard accessibility.
Side-by-Side Examples
<div class="e-verticalnav">
<e-verticalnav-menu id="verticalnav-unique-id">
<e-verticalnav-item icon="user" value="Dashboard" status="active" id="qwe"></e-verticalnav-item>
<e-verticalnav-item icon="mobile" value="Mobile reporting" status="disabled"></e-verticalnav-item>
<e-verticalnav-item icon="e-track" value="Link tracking"></e-verticalnav-item>
</e-verticalnav-menu>
<div class="e-verticalnav__content">
Et deserunt sunt eiusmod ullamco enim sint ipsum eu voluptate nulla culpa quis culpa ullamco tempor consectetur excepteur nisi voluptate amet ut veniam occaecat mollit anim irure ut anim cillum quis laborum consequat amet consequat laborum tempor deserunt ut do commodo dolor nisi quis in ad in mollit aliqua dolore excepteur proident ad occaecat consectetur dolore aute sit lorem in sint magna consequat aute mollit velit qui laboris ipsum excepteur anim sed quis esse labore fugiat sunt est sed et adipiscing in cupidatat dolore mollit sit est magna laborum mollit do enim nulla aliquip ut eu anim qui nulla ullamco exercitation voluptate excepteur mollit in laboris consequat aliquip eiusmod consequat ut sit ut incididunt elit officia dolore reprehenderit magna sed nisi commodo laboris dolore irure reprehenderit tempor ex qui enim consequat consequat duis duis in enim cupidatat sint enim ut dolore occaecat lorem veniam in nostrud eiusmod quis in sint aute in ad quis anim et enim cupidatat in fugiat culpa commodo lorem sit dolor proident enim dolor sed sint occaecat ex cupidatat esse excepteur voluptate adipiscing laborum nulla consequat nostrud elit dolor minim elit esse esse commodo ut ut aliquip sint dolor commodo ex anim sed sed deserunt lorem
</div>
</div><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>