Steps / Timeline / ScrollArea

流程进度 RdSteps、操作历史 RdTimeline、可控滚动区 RdScrollArea（侧栏树、对话区内统一细滚动条）。

Steps

商机阶段、多步流程进度展示。

起草

审核

完成

<script setup lang="ts">
import { RdSteps } from '@rd-element/ui'
</script>

<template>
  <RdSteps :steps="[
    { label: '起草', done: true },
    { label: '审核', done: true },
    { label: '完成' },
  ]" />
</template>

Timeline

动态、操作历史、跟进记录时间轴。

创建订单

系统

10:00

已发货

仓管

14:20

已签收

客户

昨日

<script setup lang="ts">
import { RdTimeline } from '@rd-element/ui'
</script>

<template>
  <RdTimeline :items="[
    { title: '创建订单', time: '10:00', meta: '系统' },
    { title: '已发货', time: '14:20', meta: '仓管' },
  ]" />
</template>

ScrollArea

侧栏树、筛选面板、对话区内可控滚动与统一细滚动条。

滚动行 1

滚动行 2

滚动行 3

滚动行 4

滚动行 5

滚动行 6

滚动行 7

滚动行 8

滚动行 9

滚动行 10

滚动行 11

滚动行 12

滚动行 13

滚动行 14

滚动行 15

滚动行 16

<script setup lang="ts">
import { RdScrollArea } from '@rd-element/ui'
</script>

<template>
  <RdScrollArea :height="120">
    <p v-for="n in 20" :key="n">滚动行 {{ n }}</p>
  </RdScrollArea>
</template>

API

RdSteps Attributes

属性名	说明	类型	默认值
steps	步骤列表	RdStepItem[]	—
steps[].label	步骤标题	string	—
steps[].done	是否已完成	boolean	false

RdTimeline Attributes

属性名	说明	类型	默认值
items	时间点列表	RdTimelineItem[]	—
items[].title	标题	string	—
items[].time	时间	string	—
items[].meta	辅助信息	string	—

RdScrollArea Attributes

属性名	说明	类型	默认值
height / maxHeight	固定或最大高度	number | string	—
orientation	滚动方向	'vertical' | 'horizontal' | 'both'	'vertical'

RdScrollArea Slots

插槽名	说明
default	可滚动内容