Tabs 标签页

AuTabs 用于同一内容区域内的并列视图切换。

基础用法

文件浏览当前项目中的 Markdown 文件。

<template>
  <div class="tabs-demo">
    <AuTabs v-model="activeTab" :items="tabs" />
    <div class="tabs-demo__panel">
      <strong>{{ activeContent.title }}</strong>
      <span>{{ activeContent.description }}</span>
    </div>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue';
import { AuTabs } from 'aurora-plus';
const activeTab = ref('files');
const tabs = [
  { value: 'files', label: '文件', title: '当前项目文件' },
  { value: 'recent', label: '最近', title: '最近打开的内容' },
  { value: 'outline', label: '大纲', title: '当前文档结构' },
  { value: 'locked', label: '已锁定', disabled: true },
];
const content = {
  files: { title: '文件', description: '浏览当前项目中的 Markdown 文件。' },
  recent: { title: '最近', description: '快速回到最近打开的文档。' },
  outline: { title: '大纲', description: '按标题层级浏览当前文档。' },
};
const activeContent = computed(() => content[activeTab.value]);
</script>
<style scoped>
.tabs-demo {
  width: min(100%, 560px);
}
.tabs-demo__panel {
  display: grid;
  min-height: 92px;
  padding: 18px 12px;
  gap: 5px;
  color: var(--au-color-text-primary);
}
.tabs-demo__panel span {
  color: var(--au-color-text-secondary);
  font-size: var(--au-font-size-small);
}
</style>

Tabs API

Attributes

属性	说明	类型	默认值
modelValue	当前标签值	string | number	''
items	标签数组，支持 value、label、title、disabled	Array	[]
valueKey	标签值字段名	string	value
fill	标签按钮等宽填满容器，文字居中，下划线保持文字宽度	boolean	false

Events

事件名	说明	参数
update:modelValue	当前值更新	(value)
select	标签被选择	(value, item)
change	当前值发生变化	(value, previousValue, item)