element/examples/docs/en-US/tabs.md

Tabs

Divide data collections which have related contents however belong to different types.

How to use

Basic and concise tabs.

:::demo Tabs provide a selective card functionality and it can be achieved only by using el-tabs and child element el-tab-pane. In these two elements, we provide a list of attributes. The label in el-tab-pane determines the label of selective cards, you can write content in the label; In the next example, we add a active-name attribute in el-tabs, which can take a String value. It means an active card. In the el-tab-pane you can set corresponding name attribute,if there is no name, then the default sequence is 1/2/3/4. In the example, the selected card is card 2. Since there's no name, then set active-name to 2 can reach the same goal.

<template>
  <el-tabs>
    <el-tab-pane label="User Admin"></el-tab-pane>
    <el-tab-pane label="Config Admin"></el-tab-pane>
    <el-tab-pane label="Role Admin"></el-tab-pane>
    <el-tab-pane label="Task Compensation"></el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'first'
      };
    }
  };
</script>

:::

Card Style

Selective card style tabs.

:::demo Set type to card can get a selective card style tab.

<template>
  <el-tabs type="card" @tab-click="handleClick" @tab-remove="handleRemove">
    <el-tab-pane label="User Admin"></el-tab-pane>
    <el-tab-pane label="Config Admin"></el-tab-pane>
    <el-tab-pane label="Role Admin"></el-tab-pane>
    <el-tab-pane label="Task Compensation"></el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    methods: {
      handleRemove(tab) {
        console.log(tab);
      },
      handleClick(tab) {
        console.log(tab);
      }
    }
  };
</script>

:::

Closable

Closable tabs.

:::demo You can set closable attribute in el-tabs.It accept Boolean and it will be closable when the boolean is true.

<template>
  <el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove">
    <el-tab-pane label="User Admin"></el-tab-pane>
    <el-tab-pane label="Config Admin"></el-tab-pane>
    <el-tab-pane label="Role Admin"></el-tab-pane>
    <el-tab-pane label="Task Compensation"></el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    methods: {
      handleRemove(tab) {
        console.log(tab);
      },
      handleClick(tab) {
        console.log(tab);
      }
    }
  };
</script>

:::

Border card

Border card tabs.

:::demo Set type to border-card.

<el-tabs type="border-card">
  <el-tab-pane label="User Admin"></el-tab-pane>
  <el-tab-pane label="Config Admin"></el-tab-pane>
  <el-tab-pane label="Role Admin"></el-tab-pane>
  <el-tab-pane label="Task Compensation"></el-tab-pane>
</el-tabs>

:::

Tabs Attributes

Attribute	Description	Type	Options	Default
type	Tabs type	string	card, border-card	—
closable	If can close the tab	boolean	true, false	false
active-name	Name of the selected card	string	—	Name of first selective card

Tabs Events

Event name	Description	Callback parameter
tab-click	Hook function when tab is clicked	Clicked tab
tab-remove	Hook function when tab is removed	Removed tab

Tab-pane Attributes

Attribute	Description	Type	Options	Default
label	Card label	string	—	—
name	The identifier corresponding to the activeName of the selective card, representing the alias of the selective card	string	—	The ordinal number of the selective card in the sequence, i.e. the first one is '1'