Tabs

Divide data collections which are related yet belong to different types.

Basic usage

Basic usage of tab.

Content of Tab Panel 1

Content of Tab Panel 2

Content of Tab Panel 3

Icon tab

Tab page with icons.

Content of Tab Panel 1

Content of Tab Panel 2

Content of Tab Panel 3

Position

The position of the tab bar can be customized through the position property.

topleftrightbottom

Content of Tab Panel 1

Content of Tab Panel 2

Content of Tab Panel 3

Types

The type of label can be set by type.

Content of Tab Panel 1

Content of Tab Panel 2

Content of Tab Panel 3

<template>
  <tu-radio-group class="mb-2" v-model="tabType" type="button" size="small">
    <tu-radio label="default">default</tu-radio>
    <tu-radio label="flat">flat</tu-radio>
    <tu-radio label="card-outset">card outset</tu-radio>
    <tu-radio label="card-inset">card inset</tu-radio>
    <tu-radio label="slider-outset">slide outset</tu-radio>
    <tu-radio label="slider-inset">slide inset</tu-radio>
    <tu-radio label="text">text</tu-radio>
    <tu-radio label="button">button</tu-radio>
    <tu-radio label="button-round">button round</tu-radio>
  </tu-radio-group>

  <tu-tabs :default-active-key="1" :type="tabType" style="height: 130px">
    <tu-tab-pane :key="1" title="Tab 1"> Content of Tab Panel 1 </tu-tab-pane>
    <tu-tab-pane :key="2" title="Tab 2"> Content of Tab Panel 2 </tu-tab-pane>
    <tu-tab-pane :key="3" title="Tab 3"> Content of Tab Panel 3 </tu-tab-pane>
  </tu-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const tabType = ref('default');
</script>

<template>
  <tu-radio-group class="mb-2" v-model="tabType" type="button" size="small">
    <tu-radio label="default">default</tu-radio>
    <tu-radio label="flat">flat</tu-radio>
    <tu-radio label="card-outset">card outset</tu-radio>
    <tu-radio label="card-inset">card inset</tu-radio>
    <tu-radio label="slider-outset">slide outset</tu-radio>
    <tu-radio label="slider-inset">slide inset</tu-radio>
    <tu-radio label="text">text</tu-radio>
    <tu-radio label="button">button</tu-radio>
    <tu-radio label="button-round">button round</tu-radio>
  </tu-radio-group>

  <tu-tabs :default-active-key="1" :type="tabType" style="height: 130px">
    <tu-tab-pane :key="1" title="Tab 1"> Content of Tab Panel 1 </tu-tab-pane>
    <tu-tab-pane :key="2" title="Tab 2"> Content of Tab Panel 2 </tu-tab-pane>
    <tu-tab-pane :key="3" title="Tab 3"> Content of Tab Panel 3 </tu-tab-pane>
  </tu-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const tabType = ref('default');
</script>

Lazy load

By setting the lazy-load property, the panel can be rendered when it is first activated.

Content of Tab Panel 1

Extra

The extra display content can be customized through the extra slot.

Content of Tab Panel 1

Content of Tab Panel 2

Content of Tab Panel 3

Editable

By setting editable is true, you can turn on the dynamic increase and decrease tabs

Content of Tab Panel 1

Content of Tab Panel 2

Content of Tab Panel 3

Content of Tab Panel 4

<template>
  <tu-radio-group class="mb-2" v-model="tabType" type="button" size="small">
    <tu-radio label="default">default</tu-radio>
    <tu-radio label="flat">flat</tu-radio>
    <tu-radio label="card-outset">card outset</tu-radio>
    <tu-radio label="card-inset">card inset</tu-radio>
    <tu-radio label="slider-outset">slide outset</tu-radio>
    <tu-radio label="slider-inset">slide inset</tu-radio>
    <tu-radio label="text">text</tu-radio>
    <tu-radio label="button">button</tu-radio>
    <tu-radio label="button-round">button-round</tu-radio>
  </tu-radio-group>

  <tu-tabs
    v-model="tabValue"
    :type="tabType"
    editable
    show-add-button
    auto-switch
    @add="handleAdd"
    @delete="handleDelete"
  >
    <tu-tab-pane
      v-for="(item, index) in tabData"
      :key="item.key"
      :title="`Tab ${item.key}`"
      :closable="index !== 0"
    >
      {{ `Content of Tab Panel ${item.key}` }}
    </tu-tab-pane>
  </tu-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const tabType = ref('default');
const tabData = ref([{ key: 1 }, { key: 2 }, { key: 3 }, { key: 4 }]);
const tabValue = ref(1);

const handleAdd = () => {
  const count = tabData.value.length + 1;
  tabData.value = [...tabData.value, { key: count }];
};

const handleDelete = (key: number) => {
  if (key === tabValue.value) {
    const targetIndex = tabData.value.findIndex((i) => i.key === key);
    tabValue.value = tabData.value[targetIndex - 1].key;
  }
  tabData.value = tabData.value.filter((i) => i.key !== key);
};
</script>

<template>
  <tu-radio-group class="mb-2" v-model="tabType" type="button" size="small">
    <tu-radio label="default">default</tu-radio>
    <tu-radio label="flat">flat</tu-radio>
    <tu-radio label="card-outset">card outset</tu-radio>
    <tu-radio label="card-inset">card inset</tu-radio>
    <tu-radio label="slider-outset">slide outset</tu-radio>
    <tu-radio label="slider-inset">slide inset</tu-radio>
    <tu-radio label="text">text</tu-radio>
    <tu-radio label="button">button</tu-radio>
    <tu-radio label="button-round">button-round</tu-radio>
  </tu-radio-group>

  <tu-tabs
    v-model="tabValue"
    :type="tabType"
    editable
    show-add-button
    auto-switch
    @add="handleAdd"
    @delete="handleDelete"
  >
    <tu-tab-pane
      v-for="(item, index) in tabData"
      :key="item.key"
      :title="`Tab ${item.key}`"
      :closable="index !== 0"
    >
      {{ `Content of Tab Panel ${item.key}` }}
    </tu-tab-pane>
  </tu-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const tabType = ref('default');
const tabData = ref([{ key: 1 }, { key: 2 }, { key: 3 }, { key: 4 }]);
const tabValue = ref(1);

const handleAdd = () => {
  const count = tabData.value.length + 1;
  tabData.value = [...tabData.value, { key: count }];
};

const handleDelete = (key: number) => {
  if (key === tabValue.value) {
    const targetIndex = tabData.value.findIndex((i) => i.key === key);
    tabValue.value = tabData.value[targetIndex - 1].key;
  }
  tabData.value = tabData.value.filter((i) => i.key !== key);
};
</script>

Trigger

Specify the trigger method by trigger.

clickhover

Content of Tab Panel 1

Content of Tab Panel 2

Content of Tab Panel 3

Tabs API

Tabs Attributes

Name	Description	Type	Default
active-key/v-model	The key of the currently selected label	`String` `Number`	-
default-active-key	The key of the tab selected by default (uncontrolled state, select the first tab page when it is empty)	`String` `Number`	-
position	Position of the tab	`String`	top
type	The type of tab	`String`	default
direction	The direction of tab	`String`	horizontal
editable	Whether to enable editable mode	`Boolean`	false
show-add-button	Whether to display the add button (only available in editable mode)	`Boolean`	false
destroy-on-hide	Whether to destroy the content when the label is not displayed	`Boolean`	false
lazy-load	Whether to mount the content when the label is first displayed	`Boolean`	false
justify	The height of the container is fully supported, and it only takes effect in horizontal mode.	`Boolean`	false
animation	Whether to enable option content transition animation	`Boolean`	false
header-padding	Whether there is a horizontal margin on the header of the tab.	`Boolean`	true
auto-switch	Whether to switch to a new tab after creating a tab (the last one)	`Boolean`	false
hide-content	Whether to hide content	`Boolean`	false
trigger	Trigger method	`String`	click

Tabs Events

Name	Description	Type
change	Triggered when the current tag value changes	`Function`
tab-click	Triggered when the user clicks on the tab	`Function`
add	Triggered when the user clicks the add button	-
delete	Triggered when the user clicks the delete button	`Function`

Tabs Slots

Name	Description
extra	Additional tab content

Tab-Pane API

Tab-Pane Attributes

Name	Description	Type	Default
title	Title of the tab	`String`	-
disabled	Whether to disable	`Boolean`	false
closable	Whether to allow this tab to be closed (only effective in editable mode)	`Boolean`	true
destroy-on-hide	Whether to destroy the content when the label is not displayed	`Boolean`	false

Tab-Pane Slots

Name	Description
title	Tab title

Tabs ​

Basic usage ​

Icon tab ​

Position ​

Types ​

Lazy load ​

Extra ​

Editable ​

Trigger ​

Tabs API ​

Tabs Attributes ​

Tabs Events ​

Tabs Slots ​

Tab-Pane API ​

Tab-Pane Attributes ​

Tab-Pane Slots ​

Tabs

Basic usage

Icon tab

Position

Types

Lazy load

Extra

Editable

Trigger

Tabs API

Tabs Attributes

Tabs Events

Tabs Slots

Tab-Pane API

Tab-Pane Attributes

Tab-Pane Slots