Tabs Component

Tabs component allows users to switch between different views, serving as an important way for content organization and navigation, commonly used for categorized content display.

Basic Usage

Basic tabs usage, displaying the default line-style tabs.

Home Content

Show Code

Different Types

Tabs component provides three different types: line style (line), block style (block), and border style (border).

Line Style:

Block Style:

Border Style:

Show Code

Custom Gap

You can customize the gap between tabs by setting the gap attribute. When set to 0, tabs will fill the entire container.

Default Gap (gap=8):

Large Gap (gap=20):

Full Width (gap=0):

Show Code

Custom Height

You can customize the height of tabs by setting the height attribute.

Default Height (height=42px):

Small Size (height=32px):

Large Size (height=56px):

Show Code

Tabs with Icons

You can add icons to tabs by using the icon attribute on the TTabs component.

Home Content

Show Code

With Close Button

Set the is-close attribute to true to enable the close functionality for tabs.

Current Tab: tab1

Show Code

Disabled State

Set the disabled attribute on the TTabs component to disable specific tabs.

Currently Selected: tab1

Option 2 and Option 4 are disabled and cannot be selected

Show Code

Tabs API

TTabs Attributes

Attribute	Description	Type	Accepted Values	Default
disabled	Whether disabled	boolean	—	false
value	Tab value	string/number	—	—
icon	Tab icon	string	—	—

TTabsGroup Attributes

Attribute	Description	Type	Accepted Values	Default
v-model	Binding value	string/number	—	—
type	Tab type	string	line/block/border	line
height	Tab height	string	—	42px
gap	Tab gap	number	—	8
is-close	Whether to show close button	boolean	—	false
action-duration	Switch animation duration (ms)	number	—	220

TTabsGroup Events

Event Name	Description	Parameters
change	Triggered when tab switches	(value: ValueType)
close	Triggered when tab is closed	(value: ValueType)

TTabsGroup Methods

Method Name	Description	Parameters
updateAction	Update action position	—

TTabs Slots

Slot Name	Description
default	Tab content

TTabsGroup Slots

Slot Name	Description
default	Place TTabs component

Style Variables

The tabs component uses the following style variables, which can be customized through SCSS variables:

Variable Name	Description
$theme-color-primary	Theme color - Primary
$theme-color-danger	Theme color - Danger
$text-color-default	Text color - Default
$font-size-default	Font size - Default