Tabs 分段

区块内视图切换：日/周/月、图表维度、表单分段。由 RdTabs + List / Trigger / Content 组合。

基础用法

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

日视图内容

<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>

API

RdTabs Attributes

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

RdTabsList Attributes

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

RdTabsTrigger Attributes

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

RdTabsContent Attributes

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

Slots

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