前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载本文以 rsuite 的Progress进度条组件为对象系统讲解其基础用法、状态控制active/success/fail、不确定加载动画、颜色尺寸定制、百分比位置、条纹效果、自定义信息内容与多段进度等能力。结合 Progress 官方文档、源码实现 与 测试用例读者可掌握从最简单的百分比展示到磁盘占用可视化等完整实战方案。组件概览与获取方式Progress用于显示某个操作进度的状态是 rsuite 中对加载、上传、存储空间等场景的通用可视化组件。从源码结构看它是一个复合组件Progress.Line水平/垂直线条进度条为默认形态同时挂载了Progress.Circle环形进度条作为子组件见 Progress.tsx。import { Progress } from rsuite; const App () Progress percent{20} /;上述代码渲染一个进度为 20% 的水平进度条。组件同时导出ProgressLine二者等价均可直接使用见 index.tsx。基础用法默认水平进度条不传入任何额外配置时Progress显示一条水平进度条进度由percent决定默认值为0百分比信息显示在进度条右侧import { Progress } from rsuite; const App () Progress percent{20} /;从源码 ProgressLine.tsx 可以看到组件渲染结构为outer trail stroke三层进度通过 CSS 变量--rs-progress-line-stroke注入内联样式由样式表 _progress-line.scss 将width设置为该变量值从而实现进度填充。状态控制active / success / fail使用status属性指示进度所处的不同状态可选值为active、success与failimport { Progress, VStack, Text } from rsuite; const App () ( VStack spacing{10} TextActive/Text Progress percent{30} statusactive / TextFail/Text Progress percent{50} statusfail / TextSuccess/Text Progress percent{100} statussuccess / /VStack );三个状态的行为差异如下active进度条上叠加一条白色高光做往复扫过动画对应_progress-line.scss中的progress-active关键帧表示任务正在进行success进度条与文字变为成功色CSS 变量--rs-progress-bar-success同时信息区默认渲染成功图标fail进度条与文字变为失败色--rs-progress-bar-fail信息区默认渲染失败图标。状态图标的默认逻辑位于 ProgressInfo.tsx当存在status且不为active时使用PROGRESS_STATUS_ICON[status]渲染对应图标否则显示纯文本百分比。源码层通过data-status属性将状态传递给样式层ProgressLine.tsxSCSS 依据该属性选择颜色与动画分支。不确定状态indeterminate当进度百分比未知、只知道操作正在进行时使用indeterminate属性渲染一段来回移动的动画制造持续加载的观感import { Progress } from rsuite; const App () { return Progress indeterminate /; };实现细节源码在indeterminate为真时强制将内部 stroke 的percent设为100ProgressLine.tsx并在根节点加上rs-progress-line-indeterminate类样式层在 stroke 内部用::before伪元素绘制宽度 30% 的色块通过progress-indeterminate关键帧以 1.5s 的周期循环移动见 _progress-line.scss。该特性自 6.0.0 版本加入。颜色与尺寸定制strokeColor自定义进度条颜色strokeColor不仅支持纯色还支持 CSS 渐变字符串可用于打造渐变进度条import { Progress, VStack } from rsuite; const App () ( VStack spacing{20} Progress percent{30} strokeColor#673ab7 / Progress percent{30} strokeColorlinear-gradient(45deg, #4CAF50, #2196F3) / Progress percent{50} strokeColorlinear-gradient(45deg, #2196F3,rgb(149, 243, 33)) trailColor#000 / /VStack );源码中strokeColor被映射为 CSS 变量--rs-progress-line-colorProgressLine.tsx因此传入的linear-gradient(...)字符串可直接作为 background 值使用。同示例中的trailColor对应背景轨道色--rs-progress-line-trail-color可用来区分已填充与未填充区域。strokeWidth 与 radius调整高度与圆角strokeWidth控制进度条的高度线宽radius自定义边框圆角二者配合可获得圆角胶囊进度条import { Progress, VStack } from rsuite; const App () ( VStack spacing{10} Progress percent{30} strokeWidth{20} / Progress percent{30} strokeWidth{20} radius{10}/ /VStack );从源码看strokeWidth同时写入--rs-progress-line-size与--rs-progress-line-trail-size两个 CSS 变量ProgressLine.tsx分别控制 stroke 与 trail 的厚度保证轨道和填充保持同一厚度radius写入--rs-progress-line-radius统一作用于 trail、stroke 及外层容器。radius的默认值取自设计变量--rs-radius-sm。若只传入strokeWidth而不传trailWidthtrail 会默认跟随 stroke 的厚度trailWidth可单独覆盖轨道厚度。百分比位置percentPlacementpercentPlacement控制百分比指示器的位置支持五个取值start左侧外部、end右侧外部默认、insideStart内部靠左、insideEnd内部靠右、insideCenter内部居中import { Progress, VStack } from rsuite; const App () ( VStack spacing{20} Progress percent{30} percentPlacementstart / Progress percent{30} percentPlacementend / Progress percent{30} percentPlacementinsideStart strokeWidth{20} radius{10} / Progress percent{30} percentPlacementinsideEnd strokeWidth{20} radius{10} / Progress percent{30} percentPlacementinsideCenter strokeWidth{20} radius{10} / /VStack );注意内部放置inside*需要足够的strokeWidth才能看清文字因此示例中将strokeWidth提高到 20。实现上组件通过percentPlacement?.startsWith(inside)判断信息区是渲染在 stroke 内部还是外部ProgressLine.tsx并将data-placement写到根节点第 121 行由 SCSS 依据该属性切换 flex 方向与内部对齐方式_progress-line.scss。条纹效果stripedstriped为进度条叠加 45 度斜向条纹纹理与statusactive组合时条纹会持续滚动动画import { Progress, VStack } from rsuite; const App () ( VStack spacing{20} Progress percent{30} striped / Progress percent{30} striped statusactive / Progress percent{50} striped statussuccess / Progress percent{50} striped statusfail / Progress percent{70} striped statusactive strokeWidth{20} radius{10} percentPlacementinsideCenter / /VStack );条纹由 stroke 的::after伪元素以linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent ...)绘制background-size为 16px 的 CSS 变量--rs-progress-line-stripe-size当同时处于active状态时progress-stripe关键帧以 1s 线性循环驱动条纹平移_progress-line.scss。垂直模式下条纹角度自动切换为 -45 度。自定义信息内容renderInfo 与 showInforenderInfo渲染比百分比更丰富的信息renderInfo接收(percent, status)两个参数返回任意 ReactNode可用于展示完成文案、图标、自定义格式等import { Progress, VStack, HStack } from rsuite; import { FaCheckCircle } from react-icons/fa; const App () ( VStack spacing{20} Progress percent{100} statussuccess renderInfo{(percent, status) ( span style{{ color: status success ? #4CAF50 : #000 }} {status success ? Completed! : ${percent}%} /span )} / Progress percent{100} renderInfo{percent ( HStack FaCheckCircle color#4CAF50 / span{percent}% Done/span /HStack )} / Progress percent{60} percentPlacementinsideCenter strokeWidth{20} radius{10} renderInfo{percent Current progress: ${percent}%} / /VStack );从 ProgressInfo.tsx 可以看到优先级renderInfo存在时优先调用它否则根据status决定渲染状态图标还是纯百分比文本。showInfo隐藏文字信息当只需要纯视觉进度、不需要任何文字时设置showInfo{false}。典型场景是结合sections展示多段存储占用见下文。测试用例 ProgressLine.spec.tsx 验证了showInfo{false}时 DOM 中不会出现.rs-progress-line-info节点。多段进度sectionssections允许在同一根进度条上渲染多个不同颜色的分段非常适合可视化磁盘空间占用、任务拆分或多指标对比import { Progress, VStack, HStack, Text, Divider } from rsuite; const App () ( VStack Progress sections{[ { percent: 15, color: #f7635c }, { percent: 40, color: #ffb300 }, { percent: 15, color: #409af5 } ]} / Divider / HStack justifyspace-between w100% TextMacintosh HD/Text TextUsed: 750 GB / 1 TB/Text /HStack Progress strokeWidth{20} radius{10} showInfo{false} sections{[ { percent: 15, color: #f7635c, label: Applications, tooltip: Apps: 150 GB }, { percent: 20, color: #f08800, label: Documents, tooltip: Documents: 200 GB }, { percent: 40, color: #717273, label: System Data, tooltip: System Data: 400 GB }, { percent: 25, color: #b6b7b8, label: 250 GB, tooltip: Unused: 250 GB } ]} / /VStack );每个分段由ProgressSection接口描述types.tsinterface 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; }字段说明percent该分段占整条进度条的百分比所有分段之和即总进度color分段颜色直接作用于该段背景label可选显示在分段内部的文字标签tooltip可选悬停分段时通过 Whisper Tooltip 弹出的提示内容。实现原理ProgressSections.tsx组件按顺序遍历sections为每段创建一个ProgressStroke并通过累加countPercent计算每段的bottom偏移垂直模式从而按比例堆叠。总进度为各段percent之和同步反映在aria-valuenow上ProgressLine.tsx。分段样式对首段与末段分别应用起始端/结束端圆角_progress-line.scss。垂直进度条verticalvertical将进度条旋转为自下而上的垂直方向status、strokeColor、percentPlacement、sections等所有属性均继续适用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 );垂直模式样式位于 _progress-line.scss轨道trail最小高度 100pxstroke 改为按height百分比填充且transform: rotate(180deg)实现自下而上生长percentPlacement在垂直模式下的语义映射为start底部、end顶部默认inside*则按 start/end/center 垂直对齐。垂直模式下内部信息文字通过 mixin 旋转 90 度竖排显示。注意垂直进度条默认宽度自适应width: auto实际占位高度由外层容器如示例中的h{300}决定。Props 完整参考Progress属性名称类型 (默认值)描述版本classPrefixstring(progress-line)组件 CSS 类的前缀indeterminateboolean显示不确定状态的加载动画6.0.0percentnumber(0)进度百分比percentPlacementstart | end | insideStart | insideEnd | insideCenter(end)百分比信息的显示位置6.0.0radiusnumber | string进度条的圆角半径6.0.0renderInfo(percent: number, status?: success | fail | active) ReactNode自定义信息内容的渲染函数6.0.0sectionsProgressSection[]具有不同颜色的多个进度段6.0.0showInfoboolean(true)是否显示文字statussuccess | fail | active进度状态stripedboolean是否显示条纹效果6.0.0strokeColorstring线条颜色strokeWidthnumber线条宽度trailColorstring背景颜色trailWidthnumber背景宽度verticalboolean垂直显示进度条widthnumber圆直径对应Progress.Circle环形进度条的尺寸参数其中indeterminate、percentPlacement、radius、renderInfo、sections、striped均为 6.0.0 版本新增能力。ProgressSection类型由 src/Progress/types.ts 定义并随组件导出。无障碍与源码细节ProgressLine在 DOM 层面遵循 WAI-ARIA 进度条规范根节点带有roleprogressbar、aria-valuemin0、aria-valuemax100与aria-valuenow取sections总和或percent并携带data-status、data-placement供样式与测试断言使用ProgressLine.tsx。测试用例 ProgressLine.spec.tsx 覆盖了百分比注入、strokeWidth生成的 CSS 变量、状态/垂直/条纹/不确定类名以及showInfo开关等关键行为多段进度的累积计算另有 ProgressLineSections.spec.tsx 验证。若需要环形进度条可使用Progress.Circle其实现位于 src/ProgressCircle/ProgressCircle.tsx与Progress.Line共享ProgressInfo等内部件width圆直径即为其专属参数。综上Progress从最简单的percent百分比展示到sections多段堆叠、indeterminate未知加载、vertical垂直布局与striped动态条纹覆盖了绝大多数业务进度可视化需求配合renderInfo可将信息区扩展为任意自定义内容值得在加载、上传、存储展示等场景中直接复用。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐Lenis平滑滚动完整指南3行代码实现60fps丝滑体验Lenis平滑滚动完整指南3行代码实现60fps丝滑体验 Lenis 是一个几 KB 的平滑滚动库让页面滚动不再一格一格地跳而是像丝一样滑过去。它不是前端UI组件Bubble Tea 动画进度条实战用 progress 组件实现平滑过渡的 TUI 进度显示Bubble Tea 动画进度条实战用 progress 组件实现平滑过渡的 TUI 进度显示 本篇文章以 Bubble Tea 仓库中的 progressCLI跨平台Smooth水平进度条多线段流动效果配置progress-bar-cj进阶完全指南Smooth水平进度条多线段流动效果配置progress bar cj进阶完全指南 progress bar cj 是用仓颉语言开发的鸿蒙自定义进度条组件库后端ORM上一篇如何用moderncv打造专业简历LaTeX排版终极指南下一篇Druid窗口生命周期管理从创建到销毁的状态控制创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考