Tabs

Tab switching component with line and card styles.

Basic Usage

type="line" is the default. The active tab has a sliding indicator.

Users content

Settings content

Roles content

<ATabs>
  <ATabPane label="Users" name="1">Users content</ATabPane>
  <ATabPane label="Settings" name="2">Settings content</ATabPane>
  <ATabPane label="Roles" name="3">Roles content</ATabPane>
</ATabs>

Card Style

Set type="card" for card-style tabs.

Users content

Settings content

Roles content

<ATabs type="card">
  <ATabPane label="Users" name="1">Users content</ATabPane>
  <ATabPane label="Settings" name="2">Settings content</ATabPane>
  <ATabPane label="Roles" name="3">Roles content</ATabPane>
</ATabs>

Closable

Set closable to show close buttons.

Closable tab content

Click the close button to remove

<ATabs closable @edit="(action, name) => console.log(action, name)">
  <ATabPane label="Tab 1" name="1">Content</ATabPane>
  <ATabPane label="Tab 2" name="2">Content</ATabPane>
</ATabs>

Disabled Tab

Set disabled on ATabPane.

Enabled content

Disabled content

Enabled content

<ATabs>
  <ATabPane label="Enabled" name="1">Enabled content</ATabPane>
  <ATabPane label="Disabled" name="2" disabled>Disabled content</ATabPane>
  <ATabPane label="Enabled" name="3">Enabled content</ATabPane>
</ATabs>

API

Tabs Props

Name	Type	Default	Description
modelValue	string | number	—	Currently active tab name
type	'line' | 'card'	'line'	Tab style
closable	boolean	false	Whether tabs are closable
addable	boolean	false	Show add button
tabPosition	'top' | 'left'	'top'	Tab position

Tabs Events

Name	Description
update:modelValue	Active tab changed
tabClick	Tab clicked
edit	Close or add tab, params (action, name?)

TabPane Props

Name	Type	Default	Description
label	string	—	Tab title
name	string | number	—	Unique identifier
disabled	boolean	false	Disabled

Interaction

• Line tab indicator follows with spring elastic
• Content fade-in animation on switch
• Close button fades in on hover
• Full ARIA tab roles