element

4.3 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 label="User" name="first">User</el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'first'
      };
    }
  };
</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">User</el-tab-pane>
    <el-tab-pane label="Config">Config</el-tab-pane>
    <el-tab-pane label="Role">Role</el-tab-pane>
    <el-tab-pane label="Task">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">User</el-tab-pane>
    <el-tab-pane label="Config">Config</el-tab-pane>
    <el-tab-pane label="Role">Role</el-tab-pane>
    <el-tab-pane label="Task">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">User</el-tab-pane>
  <el-tab-pane label="Config">Config</el-tab-pane>
  <el-tab-pane label="Role">Role</el-tab-pane>
  <el-tab-pane label="Task">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	—	—
label-content	render function for tab title	Function(h, tab:vueInstance)	-	-
disabled	whether Tab is disabled	boolean	-	false
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.3 KiB Raw Blame History