前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载导读本文聚焦 rsuite 组件库中Progress的**垂直进度条vertical**形态基于官方示例文档 line-vertical.md 展开并对照 Progress 主文档 与 ProgressLine.tsx 源码进行深入讲解。读完本文你将掌握垂直进度条的全部核心用法——包括vertical属性开启方式、status状态、percentPlacement百分比文字摆放、indeterminate不确定态动画、strokeWidth/radius尺寸定制以及sections多段分区并理解其底层 CSS 布局与源码实现原理可直接在真实业务中落地使用。一、垂直进度条是什么rsuite 的Progress组件默认渲染为水平进度条见 line.md通过import { Progress } from rsuite引入即可使用import { Progress, VStack } from rsuite; const App () Progress percent{20} /; ReactDOM.render(App /, document.getElementById(root));而垂直进度条只需在Progress即Progress.Line上添加vertical属性Progress vertical /官方文档en-US/index.md 的 “Vertical” 小节明确指出设置vertical属性后进度条自上而下纵向排布并且status、颜色strokeColor、百分比文字位置percentPlacement等所有其余属性在垂直进度条上同样生效。这意味着你不需要学习一套新的 API只需把熟悉的水平进度条能力“竖起来”即可。从源码看vertical是ProgressLineProps中的一个布尔属性src/Progress/ProgressLine.tsx/** The progress bar is displayed vertically */ vertical?: boolean;其底层样式通过在根节点上追加rs-progress-line-vertical修饰类实现withPrefix({ vertical, striped, indeterminate })并由 CSS 将弹性布局方向从横向改为纵向见 src/Progress/styles/_progress-line.scss.rs-progress-line-vertical { flex-direction: column-reverse; ... .rs-progress-line-trail { flex-direction: column-reverse; } }也就是说垂直布局是纯 CSS 驱动、API 层面零额外成本的特性。二、基础用法最小可运行示例官方示例line-vertical.md用一个HStack容器把多种垂直进度条并排展示完整代码如下import { Progress, HStack } from rsuite; const App () ( HStack h{300} spacing{32} wrap Progress vertical / Progress vertical percent{30} statusactive / Progress vertical percent{50} statusfail / Progress vertical percent{100} statussuccess / Progress vertical indeterminate / Progress vertical percent{80} showInfo{false} / Progress vertical percent{30} percentPlacementstart / Progress vertical percent{30} percentPlacementend / Progress vertical percent{60} percentPlacementinsideStart strokeWidth{20} radius{10} / Progress vertical percent{60} percentPlacementinsideEnd strokeWidth{20} radius{10} / Progress vertical percent{60} percentPlacementinsideCenter strokeWidth{20} radius{10} / Progress vertical strokeWidth{20} radius{10} showInfo{false} sections{[ { percent: 40, color: #f7635c, label: Documents }, { percent: 30, color: #f08800, label: Media }, { percent: 30, color: #409af5, label: Applications } ]} / /HStack );2.1 容器说明HStack是 rsuite 提供的水平堆叠布局组件这里用h{300}固定容器高度垂直进度条需要父容器有确定高度才能正确铺满纵向空间spacing{32}控制条与条之间的间距wrap允许自动换行每条进度条通过vertical开启垂直模式不传percent时默认为0源码中percent 0为默认值见 ProgressLine.tsx。2.2 核心要点属性作用在垂直示例中的体现vertical开启垂直方向每一条都声明percent当前进度百分比0100从0、30、50、100覆盖不同进度status状态active/success/fail第 24 条indeterminate不确定态动画第 5 条showInfo是否显示百分比文字第 6 条关闭percentPlacement文字位置第 711 条strokeWidth/radius条宽 / 圆角第 911 条sections多段分区最后一条下面逐一深入。三、状态statusactive / success / fail垂直进度条完整支持三种状态line-status.md 的垂直版本Progress vertical percent{30} statusactive / // 进行中条纹动画 Progress vertical percent{50} statusfail / // 失败 Progress vertical percent{100} statussuccess / // 成功active进行中状态进度条会呈现流动/条纹动画效果fail失败状态配合 100的 percent 用于出错中断场景success成功状态通常搭配percent{100}完整走完。状态信息会被写入 DOM 作为无障碍与样式钩子。源码中通过data-status{status}属性暴露状态ProgressLine.tsxCSS 侧对垂直形态单独适配了动画.rs-progress-line-vertical:where([data-statusactive]) .rs-progress-line-stroke::before { animation-name: progress-active-vertical; }可见连 active 状态下的流动方向都针对纵向做了专门的关键帧动画而不是简单复用水平动画样式定义见 src/Progress/styles/_progress-line.scss 与 _animation.scss。四、不确定态indeterminate百分比未知时的加载动画当无法确定当前进度如加载中、上传中时使用indeterminate展示连续往返的动画效果line-indeterminate.mdimport { Progress } from rsuite; const App () { return Progress vertical indeterminate /; };原理层面indeterminate会强制把渲染用的百分比设为100源码percent{indeterminate ? 100 : percent}见 ProgressLine.tsx保证动画轨道完整可见CSS 通过rs-progress-line-indeterminate修饰类叠加纵向往返动画.rs-progress-line-vertical.rs-progress-line-indeterminate { ... animation: progress-indeterminate-vertical 1.5s ease-in-out infinite; }该动画定义于 src/Progress/styles/_animation.scss 中垂直与水平方向分别有独立的*-vertical变体周期约为 1.5sease-in-out缓动让往返更自然。注意indeterminate与percent同时传入时百分比文字区域仍按你传入的percent渲染ProgressInfo接收的是原始percent只是动画轨道按 100% 绘制。五、百分比文字位置percentPlacement五种摆放方案官方文档en-US/index.md “Percent placement” 小节规定可选值为start、end、insideStart、insideEnd、insideCenter默认end。垂直示例中使用了除insideStart外全部四种再加上insideCenter的组合演示Progress vertical percent{30} percentPlacementstart / // 文字在顶部 Progress vertical percent{30} percentPlacementend / // 文字在底部默认 Progress vertical percent{60} percentPlacementinsideStart strokeWidth{20} radius{10} / Progress vertical percent{60} percentPlacementinsideEnd strokeWidth{20} radius{10} / Progress vertical percent{60} percentPlacementinsideCenter strokeWidth{20} radius{10} /注意垂直模式下start/end不再是水平模式下的“左/右”而是纵向的“上/下”start文字位于轨道上方end文字位于轨道下方默认值见 ProgressLine.tsx 的percentPlacement endinsideStart/insideEnd/insideCenter文字内嵌在进度条内部的上端、下端、居中位置。5.1 源码中的关键分支逻辑ProgressLine的渲染分两条路径ProgressLine.tsx// Determine if the info should be placed inside the stroke const isInsidePlacement percentPlacement?.startsWith(inside);当percentPlacement以inside开头时ProgressInfo会被渲染进ProgressStroke内部即进度条内部否则渲染在轨道之外的独立节点中。CSS 侧对垂直布局内的文字也有专门处理例如内部文字在纵向条中通过progress-mixins.vertical-text实现垂直书写/旋转定位见 _progress-line.scss 中.rs-progress-line-vertical .rs-progress-line-info与.rs-progress-line-vertical .rs-progress-line-stroke的规则。同时无论选择哪种percentPlacement根节点都会写入data-placement{percentPlacement}方便样式与测试钩取。建议使用inside*系列时配合较宽的strokeWidth如 20与圆角radius避免文字在小宽度轨道内拥挤。六、尺寸定制strokeWidth 与 radius垂直进度条的轨道宽度粗细由strokeWidth控制圆角由radius控制line-stroke-width.md 的垂直版本Progress vertical strokeWidth{20} radius{10} /strokeWidthnumber进度条轨道的宽度/粗细默认由内部 CSS 变量控制在垂直模式下即条的横向厚度radiusnumber | stringv6.0.0 引入进度条的圆角半径可传数值或字符串如10px用于打造圆润胶囊风格配套还有trailWidth轨道底色宽度缺省时跟随strokeWidth与trailColor轨道底色可以组合调整观感。源码中这些尺寸统一通过 CSS 变量注入样式ProgressLine.tsxconst styles mergeStyles( cssVar(trail-size, getCssValue(trailWidth || strokeWidth)), cssVar(trail-color, trailColor), cssVar(stroke, ${totalPercent}%), cssVar(size, getCssValue(strokeWidth)), cssVar(color, strokeColor), cssVar(radius, getCssValue(radius)), style );getCssValue会把数值自动规范化为 CSS 长度单位radius的默认值也来自组件主题变量styles 目录的_progress-line.scss中定义--rs-progress-radius等因此你可以通过 rsuite 的主题定制能力全局统一进度条外观。七、多段分区sections同一轨道展示多个色块Progressv6.0.0 起支持sections属性把一条轨道分成多个颜色不同的区段适合表达“文档 40%、媒体 30%、应用 30%”这类结构化占比line-sections.md 的垂直版本Progress vertical strokeWidth{20} radius{10} showInfo{false} sections{[ { percent: 40, color: #f7635c, label: Documents }, { percent: 30, color: #f08800, label: Media }, { percent: 30, color: #409af5, label: Applications } ]} /7.1 ProgressSection 数据结构官方主文档定义了接口en-US/index.md 的ts:ProgressSectioninterface ProgressSection { /** Percent of this section */ percent: number; /** Color of this section */ color: string; /** Label of this section */ label?: React.ReactNode; /** Tooltip of this section */ tooltip?: React.ReactNode; }字段含义字段类型说明percentnumber该区段占用的百分比colorstring该区段的颜色labelReact.ReactNode可选区段标签文本tooltipReact.ReactNode可选鼠标悬停提示内容7.2 源码中的处理逻辑总进度 各区段percent之和ProgressLine.tsxconst totalPercent sections ? sections.reduce((sum, section) sum section.percent, 0) : percent;该totalPercent同时被用作aria-valuenow保证无障碍读屏的数值与视觉一致ProgressLine.tsx。渲染时若传入了sections则走ProgressSections分支ProgressLine.tsx并把vertical一并传入组件{sections ? ( ProgressSections classPrefix{classPrefix} sections{sections} vertical{vertical} / ) : ( ProgressStroke ... / )}ProgressSections的垂直实现见 src/Progress/ProgressSections.tsx样式上垂直时区段容器使用flex-direction: column并针对首个/最后一个区段处理圆角衔接见 _progress-line.scss 中.rs-progress-line-vertical .rs-progress-line-sections的相关规则。小技巧多段场景下建议同时设置showInfo{false}如官方示例避免默认的单一百分比文字与多个区段的信息产生歧义如需标注请使用label/tooltip字段。八、其他在垂直条上同样生效的能力虽然本文聚焦垂直形态但主文档中下列能力均可直接与vertical组合使用颜色定制strokeColor / trailColorstrokeColor直接设置进度条颜色line-stroke-color.md示例Progress vertical percent{30} strokeColor#f7635c trailColor#f2f2f5 /条纹效果stripedstriped叠加斜纹纹理配合statusactive时条纹会流动起来line-striped.md。垂直模式下使用独立的纵向条纹动画progress-stripe-vertical.rs-progress-line-vertical.rs-progress-line-striped .rs-progress-line-stroke::after { ... } .rs-progress-line-vertical.rs-progress-line-striped:where([data-statusactive]) { animation: progress-stripe-vertical 1s linear infinite; }自定义信息内容renderInfo用renderInfo函数完全接管信息区内容line-render-info.mdrenderInfo?: (percent: number, status?: success | fail | active) React.ReactNode;例如Progress vertical percent{60} renderInfo{(percent, status) ${status ?? normal} · ${percent}%} /九、无障碍与测试保障垂直进度条在可访问性上与其他形态保持一致根节点带有roleprogressbar、aria-valuemin0、aria-valuemax100与aria-valuenow多段时取各段之和见上文并输出data-status、data-placement供样式与自动化测试使用。仓库在 src/Progress/test/ProgressLine.spec.tsx 与 src/Progress/test/ProgressLineSections.spec.tsx 中覆盖了 percent、status、sections 汇总逻辑与渲染结构断言样式行为另有 ProgressLine.styles.spec.tsx 校验你可以直接阅读这些测试用例加深对垂直进度条行为的理解也可以参考 stories/Progress.stories.tsx 中的 story 组合进行本地调试。十、完整属性速查表Progress / Progress.Line以下为 Progress 主文档 的Progress属性表标注6.0.0的属性为 v6.0.0 新增属性类型默认值说明版本classPrefixstring(progress-line)组件 CSS 类名前缀indeterminateboolean显示不确定态加载动画6.0.0percentnumber(0)进度百分比percentPlacementstart \| end \| insideStart \| insideEnd \| insideCenter(end)百分比信息的位置6.0.0radiusnumber | string进度条圆角半径6.0.0renderInfo(percent, status?) ReactNode自定义信息区内容6.0.0sectionsProgressSection[]不同颜色的多段分区6.0.0showInfoboolean(true)是否显示文字statussuccess \| fail \| active进度状态stripedboolean是否应用条纹效果6.0.0strokeColorstring进度条颜色strokeWidthnumber进度条粗细trailColorstring轨道底色trailWidthnumber轨道宽度缺省跟随strokeWidthverticalboolean垂直显示进度条widthnumber圆环直径Circle 模式属性结语在业务中选用垂直进度条垂直进度条在以下场景中尤为合适侧边栏/面板中的容量占用展示、存储与配额统计、任务队列的逐项加载以及需要与纵向布局协调的仪表类界面。由于 rsuite 让vertical与status、indeterminate、percentPlacement、sections、striped、renderInfo全部无缝兼容你只需要学会这一套 API就能同时驾驭水平与垂直两种形态。若需深入了解组件的完整实现推荐进一步阅读 src/Progress/ProgressLine.tsx、src/Progress/ProgressSections.tsx 与 src/Progress/styles/_progress-line.scss并结合 测试用例 验证行为。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐rsuite Progress 组件实战指南从基础进度条到多段式与垂直布局的完整用法rsuite Progress 组件实战指南从基础进度条到多段式与垂直布局的完整用法 本文围绕 rsuite 开源组件库中的 Progress 进度条组件前端UI组件rsuite ProgressCircle 圆形进度条组件实战指南从基本用法到多段渲染与源码原理rsuite ProgressCircle 圆形进度条组件实战指南从基本用法到多段渲染与源码原理 本文以 rsuite 组件库中的 ProgressCircl前端UI组件Vuetify 垂直步骤条v-stepper-vertical完全指南从基础用法到插槽定制Vuetify 垂直步骤条v stepper vertical完全指南从基础用法到插槽定制 垂直步骤条Vertical Stepper是 Vuetif前端UI组件上一篇FullCalendar Vue 3 组件如何快速构建专业级日程管理系统下一篇免费AI视频放大神器Video2X如何让模糊视频秒变4K高清创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考