Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint recusandae possimus et cumque eveniet nihil qui ab nesciunt eaque sapiente error, laboriosam, veniam temporibus, at quas consequatur quae minima harum!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint recusandae possimus et cumque eveniet nihil qui ab nesciunt eaque sapiente error, laboriosam, veniam temporibus, at quas consequatur quae minima harum!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint recusandae possimus et cumque eveniet nihil qui ab nesciunt eaque sapiente error, laboriosam, veniam temporibus, at quas consequatur quae minima harum!
<template>
<div>
<e-tab-group
v-model="model"
color="primary"
inactive-color="secondary">
<e-tab v-for="i in 3" :key="i" :value="i"> Option {{ i }} </e-tab>
</e-tab-group>
<e-window v-model="model">
<e-window-item v-for="i in 3" :key="i" :value="i">
<div class="pa-4">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint recusandae possimus et cumque
eveniet nihil qui ab nesciunt eaque sapiente error, laboriosam, veniam temporibus, at quas
consequatur quae minima harum!</p>
</div>
</e-window-item>
</e-window>
</div>
</template>
Stacked Buttons
You can use e-tab-group with the same properties as the e-button
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint recusandae possimus et cumque eveniet nihil qui ab nesciunt eaque sapiente error, laboriosam, veniam temporibus, at quas consequatur quae minima harum!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint recusandae possimus et cumque eveniet nihil qui ab nesciunt eaque sapiente error, laboriosam, veniam temporibus, at quas consequatur quae minima harum!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint recusandae possimus et cumque eveniet nihil qui ab nesciunt eaque sapiente error, laboriosam, veniam temporibus, at quas consequatur quae minima harum!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint recusandae possimus et cumque eveniet nihil qui ab nesciunt eaque sapiente error, laboriosam, veniam temporibus, at quas consequatur quae minima harum!
<div class="full-height pa-4">
<e-tab-group v-model="example">
<e-tab :value="1" prepend-icon="heart" stacked> Favorites</e-tab>
<e-tab :value="2" prepend-icon="history" stacked> Recents</e-tab>
<e-tab :value="3" prepend-icon="accountBox" stacked> Contacts</e-tab>
<e-tab :value="4" prepend-icon="dialpad" stacked> Keypad</e-tab>
</e-tab-group>
<EWindow v-model="example">
<e-window-item v-for="i in 4" :key="i" :value="i">
<div class="pa-4">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint recusandae possimus et cumque
eveniet nihil qui ab nesciunt eaque sapiente error, laboriosam, veniam temporibus, at quas
consequatur quae minima harum!</p>
</div>
</e-window-item>
</EWindow>
</div>
Alignment
By using the vertical property we can change the orientation of the tabs
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint recusandae possimus et cumque eveniet nihil qui ab nesciunt eaque sapiente error, laboriosam, veniam temporibus, at quas consequatur quae minima harum!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint recusandae possimus et cumque eveniet nihil qui ab nesciunt eaque sapiente error, laboriosam, veniam temporibus, at quas consequatur quae minima harum!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint recusandae possimus et cumque eveniet nihil qui ab nesciunt eaque sapiente error, laboriosam, veniam temporibus, at quas consequatur quae minima harum!
<div class="full-height d-flex pa-4">
<e-tab-group v-model="example" vertical>
<e-tab v-for="i in 3" :key="i" :value="i">Option {{ i }}</e-tab>
</e-tab-group>
<e-window v-model="example">
<e-window-item v-for="i in 3" :key="i" :value="i">
<div class="pa-4">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint recusandae possimus et cumque
eveniet nihil qui ab nesciunt eaque sapiente error, laboriosam, veniam temporibus, at quas
consequatur quae minima harum!</p>
</div>
</e-window-item>
</e-window>
</div>
Props
Explore the available props for the form component e-tab-group
Property
Description
Type
Default
model-value
The v-model value of the component.
boolean
false
color
Applies specified color to the component - supports only utility colors (for example primary or secondary)
string
primary
inactive-color
Applies specified color to the tabs when they are inactive - supports only utility colors (for example primary or secondary)
string
secondary
grow
Makes the tabs grow to fit the container
string
secondary
tab-align
Aligns the tabs to the specified side of the container
|'start'|'center' |'end'
'center'
vertical
Displays the tabs vertically
boolean
false
Props
The e-tab component inherits the same properties of the e-button component