Tabs #
The va-tabs component can be used as an on-page navigation offering with a rich variety of visual customizations and usage flexibility.
Examples #
Default usage #
By default it's displayed as a horizontal list of va-tab items
With pagination arrows #
When wrapper width is less then tabs width, pagination arrows are shown
Vertical alignment #
By using vertical prop alignment of va-tabs can be customized
Color #
Set different colors using the color prop. You can either use a theme string or the HEX color value. Inactive tabs have inherit color. If you need to change inactive tabs color, you can set color for va-tabs using CSS.
Without value #
Sometimes v-model is too much and in that case using stateful prop you can delegate state handling to the component itself
Content #
Tabs with a custom content in the default slot.
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| ariaMoveLeftLabel |
|
| |
| ariaMoveRightLabel |
|
| |
| center |
|
| |
| color |
|
| |
| disabled |
|
| |
| grow |
|
| |
| hidePagination |
|
| |
| hideSlider |
|
| |
| left |
|
| |
| modelValue |
|
| |
| nextIcon |
|
| |
| preset |
| - | |
| prevIcon |
|
| |
| right |
|
| |
| stateful |
|
| |
| vertical |
|
|
Events #
| Name | Description |
|---|---|
click:next | Emits when pagination next is clicked. The event argument is: |
click:prev | Emits when pagination prev is clicked. The event argument is: |
update:model-value | The event is triggered when the component needs to change the model. Is also used by |
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |
Slots #
| Name | Description |
|---|---|
default | For a content |
tabs | For a list of tabs |
Css Variables #
| Name | Default Value |
|---|---|
| --va-tabs-display | flex |
| --va-tabs-align-items-horizontal | center |
| --va-tabs-align-items-vertical | stretch |
| --va-tabs-container-height | 2rem |
| --va-tabs-container-margin | 0 3px |
| --va-tabs-slider-width | 0.125rem |
| --va-tabs-slider-height | 0.125rem |
| --va-tabs-slider-transition | transform ease 0.3s |
| --va-tabs-slider-wrapper-bottom | 0 |
| --va-tabs-slider-wrapper-margin | 0 |
| --va-tabs-slider-wrapper-z-index | 4000 |
| --va-tabs-slider-wrapper-transition | 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) |
FAQ #
How can I map content to tabs so that only specific tab content will be displayed? #
We have this functionality in our nearest plans, but for now you could use v-model value to map the content yourself