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 |
|---|---|---|---|
| aria-move-left-label | The aria-label of the "move left" button |
|
|
| aria-move-right-label | The aria-label of the "move right" button |
|
|
| center | Align all items to the center |
|
|
| color | Color of the component (theme string or |
|
|
| disabled | Applies |
|
|
| grow | Take all container width |
|
|
| hide-pagination | Hide or show pagination arrows |
|
|
| hide-slider | Remove slider which underlines selected item |
|
|
| left | Align all items to the left |
|
|
| model-value | The value of the |
|
|
| next-icon | Icon to be used for scrolling forward in pagination |
|
|
| preset | Named preset combination of component props. |
| - |
| prev-icon | Icon to be used for scrolling backward in pagination |
|
|
| right | Align all items to the right |
|
|
| stateful | Add possibility to work with component without setting |
|
|
| vertical | Align all items vertically |
|
|
Events #
| Name | Description |
|---|---|
click-next | Emits when pagination next is clicked |
click-prev | Emits when pagination prev is clicked |
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:model-value | 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