element

4.4 KiB

Raw Blame History

Tabs

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

Basic usage

Basic and concise tabs.

:::demo Tabs provide a selective card functionality and it can be achieved by just 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, and you can write content in the label. In this example, we add a active-name attribute indicating the active card in el-tabs, which can take a String value. In the el-tab-pane you can set corresponding name attribute, and if there is no name, the default sequence is 1/2/3/4. In this example, the selected card is card 2. If name is omitted, setting active-name to 2 can reach the same goal.

<template>
  <el-tabs :active-name="activeName">
      <el-tab-pane v-for="tab in tabs" :label="tab.label" :name="tab.name">{{tab.content}}</el-tab-pane>
    </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'first',
        tabs: [
          {label: 'User', content: '', name: 'first'},
          {label: 'Config', content: '', name: 'second'},
          {label: 'Role', content: '', name: 'third'},
          {label: 'Task', content: '', name: 'last'}
        ]
      };
    }
  };
</script>

:::

Card Style

Tabs styled as cards.

:::demo Set type to card can get a card-styled tab.

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

:::

Closable

Closable tabs.

:::demo You can set closable attribute in el-tabs. It accept Boolean and Tab 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"></el-tab-pane>
    <el-tab-pane label="Config"></el-tab-pane>
    <el-tab-pane label="Role"></el-tab-pane>
    <el-tab-pane label="Task"></el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    methods: {
      handleRemove(tab) {
        console.log(tab);
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

:::

Border card

Border card tabs.

:::demo Set type to border-card.

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

:::

Tabs Attributes

Attribute	Description	Type	Accepted Values	Default
type	type of Tab	string	card/border-card	—
closable	whether Tab is closable	boolean	—	false
active-name	name of the selected tab	string	—	name of first tab

Tabs Events

Event Name	Description	Parameters
tab-click	triggers when a tab is clicked	clicked tab
tab-remove	triggers when a tab is removed	removed tab

Tab-pane Attributes

Attribute	Description	Type	Accepted Values	Default
label	title of the tab	string	—	—
name	identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane	string	—	ordinal number of the tab-pane in the sequence, i.e. the first tab-pane is '1'

4.4 KiB Raw Blame History