Tabs 分段

区块内视图切换：日/周/月、图表维度、表单分段用 RdTabs；筛选抽屉等线型 Tab 直接用 Element Plus el-tabs（库皮肤对齐 RdListPageStatusTabs：选中字色与滑块为品牌蓝）。

基础用法

分段控件 · 白底浮起选中态。

日视图内容

<script setup lang="ts">
import { ref } from 'vue'
import { RdTabs, RdTabsList, RdTabsTrigger, RdTabsContent } from '@rd-element/ui'
const tab = ref('day')
</script>

<template>
  <RdTabs v-model="tab">
    <RdTabsList>
      <RdTabsTrigger value="day">日</RdTabsTrigger>
      <RdTabsTrigger value="week">周</RdTabsTrigger>
      <RdTabsTrigger value="month">月</RdTabsTrigger>
    </RdTabsList>
    <RdTabsContent value="day">日视图内容</RdTabsContent>
    <RdTabsContent value="week">周视图内容</RdTabsContent>
    <RdTabsContent value="month">月视图内容</RdTabsContent>
  </RdTabs>
</template>

铺满宽度

工具栏或面板内需要铺满宽度的分段切换：RdTabsList fullWidth。

内容 A

<script setup lang="ts">
import { ref } from 'vue'
import { RdTabs, RdTabsList, RdTabsTrigger, RdTabsContent } from '@rd-element/ui'
const tab = ref('a')
</script>

<template>
  <RdTabs v-model="tab">
    <RdTabsList full-width>
      <RdTabsTrigger value="a">A</RdTabsTrigger>
      <RdTabsTrigger value="b">B</RdTabsTrigger>
    </RdTabsList>
    <RdTabsContent value="a">A</RdTabsContent>
    <RdTabsContent value="b">B</RdTabsContent>
  </RdTabs>
</template>

RdTabs

属性名	说明	类型	默认值
v-model / modelValue	当前 Tab 值	string	—
defaultValue	非受控初始值	string	—

属性名	说明	类型	默认值
fullWidth	触发器均分铺满	boolean	false

属性名	说明	类型	默认值
value	Tab 值	string	—
disabled	禁用	boolean	false

属性名	说明	类型	默认值
value	对应 Tab 值	string	—
bordered	内容区边框卡片	boolean	true

插槽名	说明
default	List / Trigger / Content 结构

el-tabs 线型 Tab

不封装 Rd 组件，业务直接用 el-tabs。引入库样式后对齐 RdListPageStatusTabs：字号 13px、选中字色与底部滑块为 --rd-color-brand-blue，不再跟品牌橙 --el-color-primary。

筛选条件内容。切换 Tab 可观察选中字色与底部滑块。

筛选项配置内容。

高级内容。

筛选条件

筛选项配置

高级

<script setup lang="ts">
import { ref } from 'vue'

const active = ref('filters')
</script>

<template>
  <el-tabs v-model="active">
    <el-tab-pane label="筛选条件" name="filters">筛选条件内容</el-tab-pane>
    <el-tab-pane label="筛选项配置" name="layout">筛选项配置内容</el-tab-pane>
    <el-tab-pane label="高级" name="advanced">高级内容</el-tab-pane>
  </el-tabs>
</template>

线型 Tab API 见 Element Plus Tabs。库仅覆盖选中字色与 .el-tabs__active-bar 背景色。