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
aria-move-left-label

The aria-label of the "move left" button

String

"$t:movePaginationRight"

aria-move-right-label

The aria-label of the "move right" button

String

"$t:movePaginationLeft"

center

Align all items to the center

Boolean

false

color

Color of the component (theme string or HEX string).

String

"primary"

disabled

Applies disabled style and removes all user interaction effects.

Boolean

false

grow

Take all container width

Boolean

false

hide-pagination

Hide or show pagination arrows

Boolean

false

hide-slider

Remove slider which underlines selected item

Boolean

false

left

Align all items to the left

Boolean

true

model-value

The value of the v-model bindings.

String | Number

null

next-icon

Icon to be used for scrolling forward in pagination

String

"va-arrow-right"

preset

Named preset combination of component props.

String

-

prev-icon

Icon to be used for scrolling backward in pagination

String

"va-arrow-left"

right

Align all items to the right

Boolean

false

stateful

Add possibility to work with component without setting v-model.

Boolean

false

vertical

Align all items vertically

Boolean

false

Events #

NameDescription

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:

`() => 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

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`

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