ExUI

Appearance

Tabs 标签页 ​

分隔内容上有关联但属于不同类别的数据集合，适合游戏设置、角色信息、装备管理等场景。

基础用法 ​

最基础的标签页用法，适合展示不同类别的游戏信息。

游戏概览

这里展示游戏的基本信息、最新动态和推荐内容。

vue
<script setup>
import { ref } from 'vue'

const activeTab = ref('overview')
</script>

<template>
  <ExTabs v-model="activeTab">
    <ExTabPane name="overview" label="游戏概览">
      <p>游戏概览内容</p>
    </ExTabPane>
    <ExTabPane name="characters" label="角色">
      <p>角色管理内容</p>
    </ExTabPane>
    <ExTabPane name="achievements" label="成就">
      <p>成就系统内容</p>
    </ExTabPane>
  </ExTabs>
</template>

卡片类型 ​

使用 type="card" 可以渲染卡片风格的标签页。

850
总胜场
68%
胜率
3.2
KD比
vue
<template>
  <ExTabs v-model="activeTab" type="card">
    <ExTabPane name="stats" label="数据统计">
      <p>数据统计内容</p>
    </ExTabPane>
    <ExTabPane name="history" label="历史记录">
      <p>历史记录内容</p>
    </ExTabPane>
    <ExTabPane name="ranking" label="排行榜">
      <p>排行榜内容</p>
    </ExTabPane>
  </ExTabs>
</template>

按钮类型 ​

使用 type="button" 可以渲染按钮风格的标签页，带有霓虹发光效果。

武器库

查看和管理你的武器装备，升级武器提升战斗力。

vue
<template>
  <ExTabs v-model="activeTab" type="button">
    <ExTabPane name="weapons" label="武器">
      <p>武器库内容</p>
    </ExTabPane>
    <ExTabPane name="armor" label="护甲">
      <p>护甲库内容</p>
    </ExTabPane>
    <ExTabPane name="accessories" label="配件">
      <p>配件库内容</p>
    </ExTabPane>
  </ExTabs>
</template>

不同尺寸 ​

通过 size 属性可以设置不同的标签页尺寸。

小尺寸

小尺寸标签页内容

中等尺寸（默认）

中等尺寸标签页内容

大尺寸

大尺寸标签页内容

vue
<template>
  <ExTabs v-model="activeTab" size="small">
    <ExTabPane name="settings" label="设置">
      <p>小尺寸内容</p>
    </ExTabPane>
  </ExTabs>
  
  <ExTabs v-model="activeTab" size="large">
    <ExTabPane name="settings" label="设置">
      <p>大尺寸内容</p>
    </ExTabPane>
  </ExTabs>
</template>

带图标 ​

通过具名插槽可以为标签页添加图标。

游戏概览内容

vue
<template>
  <ExTabs v-model="activeTab">
    <template #icon-overview>
      <img src="https://api.iconify.design/ri/dashboard-line.svg" alt="概览" width="18" height="18" />
    </template>
    <template #icon-characters>
      <img src="https://api.iconify.design/ri/user-line.svg" alt="角色" width="18" height="18" />
    </template>
    
    <ExTabPane name="overview" label="概览">
      <p>概览内容</p>
    </ExTabPane>
    <ExTabPane name="characters" label="角色">
      <p>角色内容</p>
    </ExTabPane>
  </ExTabs>
</template>

禁用状态 ​

通过 disabled 属性可以禁用某个标签页。

游戏概览内容

vue
<template>
  <ExTabs v-model="activeTab">
    <ExTabPane name="overview" label="游戏概览">
      <p>游戏概览内容</p>
    </ExTabPane>
    <ExTabPane name="characters" label="角色" disabled>
      <p>角色管理内容（已禁用）</p>
    </ExTabPane>
    <ExTabPane name="achievements" label="成就">
      <p>成就系统内容</p>
    </ExTabPane>
  </ExTabs>
</template>

可关闭 ​

通过 closable 属性可以让标签页可关闭。

这是 tab1 的内容

vue
<script setup>
import { ref } from 'vue'

const editableTabs = ref(['tab1', 'tab2', 'tab3'])
const editableTabsValue = ref('tab1')

const handleTabRemove = (targetName) => {
  const tabs = editableTabs.value
  let activeName = editableTabsValue.value
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activeName = nextTab
        }
      }
    })
  }
  editableTabsValue.value = activeName
  editableTabs.value = tabs.filter(tab => tab !== targetName)
}
</script>

<template>
  <ExTabs v-model="editableTabsValue" closable @tab-remove="handleTabRemove">
    <ExTabPane 
      v-for="item in editableTabs" 
      :key="item" 
      :name="item" 
      :label="`标签 ${item}`"
    >
      <p>这是 {{ item }} 的内容</p>
    </ExTabPane>
  </ExTabs>
</template>

可添加 ​

通过 addable 属性可以让标签页可添加。

添加

这是 tab1 的内容

vue
<script setup>
import { ref } from 'vue'

const editableTabs = ref(['tab1', 'tab2', 'tab3'])
const editableTabsValue = ref('tab1')
const tabIndex = ref(3)

const handleTabAdd = () => {
  const newTabName = `tab${++tabIndex.value}`
  editableTabs.value.push(newTabName)
  editableTabsValue.value = newTabName
}
</script>

<template>
  <ExTabs v-model="editableTabsValue" addable @tab-add="handleTabAdd">
    <ExTabPane 
      v-for="item in editableTabs" 
      :key="item" 
      :name="item" 
      :label="`标签 ${item}`"
    >
      <p>这是 {{ item }} 的内容</p>
    </ExTabPane>
  </ExTabs>
</template>

设置示例 ​

展示完整的设置界面，使用标签页组织不同类别的设置。

画质超高
帧率限制144 FPS
分辨率2560x1440
垂直同步开启
vue
<template>
  <ExTabs v-model="activeTab" type="card">
    <template #icon-settings>
      <img src="https://api.iconify.design/ri/settings-3-line.svg" alt="图形" width="18" height="18" />
    </template>
    
    <ExTabPane name="settings" label="图形设置">
      <div>图形设置内容</div>
    </ExTabPane>
    
    <ExTabPane name="audio" label="音频设置">
      <div>音频设置内容</div>
    </ExTabPane>
  </ExTabs>
</template>

API ​

Tabs Props ​

属性说明类型默认值
model-value / v-model当前激活的标签页名称string | numberundefined
type标签页类型'line' | 'card' | 'button''line'
position标签页位置'top' | 'right' | 'bottom' | 'left''top'
size标签页尺寸'small' | 'medium' | 'large''medium'
closable是否可关闭booleanfalse
addable是否可添加booleanfalse
editable是否可编辑（可添加和关闭）booleanfalse
animated是否动画booleantrue

Tabs Events ​

事件名说明类型
update:model-value更新当前激活的标签页(value: string | number) => void
change标签页切换事件(name: string | number) => void
tab-click标签页点击事件(name: string | number, event: MouseEvent) => void
tab-remove标签页关闭事件(name: string | number) => void
tab-add标签页添加事件() => void

Tabs Slots ​

插槽名说明
default标签页面板内容
icon-{name}自定义标签页图标
label-{name}自定义标签页标题

Tabs Methods ​

方法名说明类型
getElement获取标签页DOM元素() => HTMLDivElement | null

TabPane Props ​

属性说明类型默认值
name标签页名称（唯一标识）string | number-
label标签页标题stringundefined
disabled是否禁用booleanfalse
closable是否可关闭booleanfalse
lazy是否懒加载booleanfalse

TabPane Slots ​

插槽名说明
default标签页面板内容

TabPane Methods ​

方法名说明类型
getElement获取面板DOM元素() => HTMLDivElement | null

无障碍支持 ​

  • 使用语义化的 HTML 标签
  • 完整的 ARIA 属性支持
  • 支持键盘导航（Enter、Space 键切换）
  • 支持屏幕阅读器
  • 支持减少动画偏好设置

主题定制 ​

可以通过 CSS 变量自定义标签页样式：

css
:root {
  --ex-tabs-nav-bg: transparent;
  --ex-tabs-tab-color: var(--ex-color-text-secondary);
  --ex-tabs-tab-active-color: var(--ex-color-neon-blue-500);
  --ex-tabs-indicator-bg: linear-gradient(90deg, var(--ex-color-neon-blue-500), var(--ex-color-neon-pink-500));
}