Tabs 标签页

Tabs 标签页

何时使用

  • 需要在同一区域内切换展示多组内容时。
  • 需要将内容分类组织、避免页面过长时。

基础用法

账户设置内容。 
<script setup lang="ts">
import { ref } from "vue";
const activeKey = ref("account");
</script>

<template>
  <Tabs v-model:active-key="activeKey" type="line">
    <TabsList>
      <TabsTrigger value="account">账户</TabsTrigger>
      <TabsTrigger value="password">密码</TabsTrigger>
    </TabsList>
    <TabsContent value="account">账户设置内容。</TabsContent>
    <TabsContent value="password">密码修改内容。</TabsContent>
  </Tabs>
</template>

配置驱动

标签来自接口等动态数据时，可直接传 tab-list：

<script setup lang="ts">
import { ref } from "vue";
const activeKey = ref("1");
const tabList = [
  { itemKey: "1", tab: "文档" },
  { itemKey: "2", tab: "帮助" },
];
</script>

<template>
  <Tabs v-model:active-key="activeKey" :tab-list="tabList">
    <div v-if="activeKey === '1'">文档内容</div>
    <div v-if="activeKey === '2'">帮助内容</div>
  </Tabs>
</template>

导入

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@reglow/reui";

Props

属性类型默认值说明
activeKeystring-激活标签（v-model:active-key）
defaultActiveKeystring-默认激活标签
tabListTabItem[][]配置式标签列表
type"line" | "button" | "card" | "slash" | "editable-card""line"标签栏样式
tabPosition"top" | "bottom" | "left" | "right""top"标签栏位置
size"small" | "default" | "large""default"尺寸
keepDOMbooleanfalse是否保持 DOM 不销毁
editable / addablebooleantrueeditable-card 类型的关闭/新增
DropdownMenu 下拉菜单
基于 reka-ui 的组合式下拉菜单，支持普通项、复选项、单选组、子菜单等。
AutoComplete 自动完成
本质是增强型 Input：监听输入给出建议列表，保留上次选中值，只允许字符串返回。