标签页 Tabs

默认 line 和 card 分别对应 Arco 的同名标签形态。 属性用法见 Element Plus 文档。

线形标签

默认线形对应 Arco line，点击标题切换内容。

Project overview.

Recent activity.

Overview

Activity

Unavailable

<script setup lang="ts">
import { ref } from 'vue'
const active = ref('overview')
</script>

<template>
  <el-tabs v-model="active" style="width: 100%">
      <el-tab-pane label="Overview" name="overview">Project overview.</el-tab-pane>
      <el-tab-pane label="Activity" name="activity">Recent activity.</el-tab-pane>
      <el-tab-pane label="Unavailable" name="disabled" disabled />
  </el-tabs>
</template>

卡片标签

type="card" 对应 Arco card，内容区域带边框。

Project overview.

Recent activity.

Overview

Activity

Unavailable

<script setup lang="ts">
import { ref } from 'vue'
const active = ref('overview')
</script>

<template>
  <el-tabs v-model="active" type="card" style="width: 100%">
      <el-tab-pane label="Overview" name="overview">Project overview.</el-tab-pane>
      <el-tab-pane label="Activity" name="activity">Recent activity.</el-tab-pane>
      <el-tab-pane label="Unavailable" name="disabled" disabled />
  </el-tabs>
</template>

带边框卡片

Arco 没有对应的 border-card，保留 Element Plus 的头部与内容结构。

Project overview.

Recent activity.

Overview

Activity

Unavailable

<script setup lang="ts">
import { ref } from 'vue'
const active = ref('overview')
</script>

<template>
  <el-tabs v-model="active" type="border-card" style="width: 100%">
      <el-tab-pane label="Overview" name="overview">Project overview.</el-tab-pane>
      <el-tab-pane label="Activity" name="activity">Recent activity.</el-tab-pane>
      <el-tab-pane label="Unavailable" name="disabled" disabled />
  </el-tabs>
</template>

关闭与位置

关闭标签和左右布局保留 Element Plus 的配置语义，移除当前项时同步更新选中项。

TopLeftRight

Overview content.

Activity content.

Settings content.

Overview

Activity

Settings

<script setup lang="ts">
import { ref } from 'vue'
import type { TabPaneName } from 'element-plus'
const position = ref<'top' | 'left' | 'right'>('top')
const tabs = ref(['Overview', 'Activity', 'Settings'])
const active = ref<TabPaneName>('Overview')
// After removing the active tab, select the first remaining one.
function remove(name: TabPaneName) {
  tabs.value = tabs.value.filter((tab) => tab !== name)
  if (active.value === name) active.value = tabs.value[0] ?? ''
}
</script>

<template>
  <div style="width: 100%">
    <el-radio-group v-model="position" style="margin-bottom: 16px">
      <el-radio-button value="top">Top</el-radio-button>
      <el-radio-button value="left">Left</el-radio-button>
      <el-radio-button value="right">Right</el-radio-button>
    </el-radio-group>
    <el-tabs v-model="active" :tab-position="position" closable @tab-remove="remove" style="min-height: 120px">
      <el-tab-pane v-for="tab in tabs" :key="tab" :label="tab" :name="tab">{{ tab }} content.</el-tab-pane>
    </el-tabs>
  </div>
</template>

与 Arco 的差异

• border-card 和左右标签位置保留 Element Plus 布局。
• 关闭图标使用 Element Plus 图标集。