Tabs

The default line and card types map to Arco's corresponding tab variants. See the Element Plus docs for props.

Line Tabs

The default matches Arco line; click a tab to change its content.

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>

Card Tabs

Card maps to Arco card with borders around the content.

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>

Border Card

Border-card has no Arco equivalent and keeps the Element Plus header and content structure.

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>

Closing & Positions

Closing and side positions retain Element Plus behavior; removing the active tab updates the selection.

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>

Differences from Arco

• Border-card and left/right positions retain the Element Plus layout.
• Close controls use Element Plus icons.