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

Open in GitHub

With pagination arrows
#

When wrapper width is less then tabs width, pagination arrows are shown

Open in GitHub

Vertical alignment
#

By using vertical prop alignment of va-tabs can be customized

Open in GitHub

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.

Open in GitHub

Without value
#

Sometimes v-model is too much and in that case using stateful prop you can delegate state handling to the component itself

Open in GitHub

Content
#

Tabs with a custom content in the default slot.

Feed
Feed content
Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
ariaMoveLeftLabel

String

"$t:movePaginationRight"

ariaMoveRightLabel

String

"$t:movePaginationLeft"

center

Boolean

false

color

String

"primary"

disabled

Boolean

false

grow

Boolean

false

hidePagination

Boolean

false

hideSlider

Boolean

false

left

Boolean

true

modelValue

String | Number

null

nextIcon

String

"va-arrow-right"

preset

String

-

prevIcon

String

"va-arrow-left"

right

Boolean

false

stateful

Boolean

false

vertical

Boolean

false

Events #

NameDescription

click:next

Emits when pagination next is clicked. The event argument is:

`() => void`

click:prev

Emits when pagination prev is clicked. The event argument is:

`() => void`

update:model-value

The event is triggered when the component needs to change the model. Is also used by v-model. The event argument is:

`() => number | string`

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model

Slots #

NameDescription

default

For a content

tabs

For a list of tabs

Css Variables #

NameDefault 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