Guide

Tabs

Create a tabbed navigation with different styles.

Usage

Use the vk-tabs together with vk-tabs-item to render a list of clickable tabs associated with a specific content.

<vk-tabs>
  <vk-tabs-item title></vk-tabs-item>
  <vk-tabs-item title></vk-tabs-item>
  <vk-tabs-item title disabled></vk-tabs-item>
</vk-tabs>

Flipped modifier

Set the flipped prop to flip tab items to the bottom.

<vk-tabs flipped>...</vk-tabs>

Alignment

Set the align prop to center, right or justify to modify the alignment of the navigations.

<vk-tabs align>...</vk-tabs>

Vertical variation

Use vk-tabs-vertical to renders tabs displayed vertically to the left or right side. 

<vk-tabs-vertical align="left">...</vk-tabs-vertical>

<vk-tabs-vertical align="right">...</vk-tabs-vertical>

Props

vk-tabs

Name Type Default Description
align String left The tabs alignment with left, right, center and justify as options.
flipped Boolean false Displays the tabs at the bottom of the content.

vk-tabs-vertical

Name Type Default Description
align String left The tabs alignment, left or right.

vk-tabs-item

Name Type Default Description
icon String -- The icon to display.
title String -- The title to display.
disabled Boolean false Displays the item as disabled.