SuperAPI AI 工具集

sgds-components-progress-bar

前端与建站

查看项目

更新于 10-15 21:54

技能介绍

用途:<sgds-progress-bar> 用于渲染横向进度条,展示任务完成度或某一数值的进度。

主要能力:支持 value 指定当前进度;variant 可选 primary(默认)或 neutral 两种颜色;label 可在进度条内部显示可见文本,如“60%”或“Step 3 of 5”。无自定义事件,也没有公开方法,不暴露自定义属性(custom properties)与 CSS part,因此不提供 CSS 样式修改。

必要用法:value 为必填,应位于 ariamin 与 ariamax 之间;始终设置 ariamin、ariamax、arialabel 以保证屏幕阅读器无障碍访问。使用前请参考 sgds-components-setup 完成安装与框架集成(React 19+ 与 React ≤18、Vue、Angular 各有说明)。

示例: <sgds-progress-bar value="60" ariamin="0" ariamax="100" arialabel="Profile completion"></sgds-progress-bar> <sgds-progress-bar value="60" ariamin="0" ariamax="100" arialabel="File upload progress" label="60%"></sgds-progress-bar>

适用场景:页面内需要显示加载进度、表单完成度、分步流程位置等可视化进度提示时使用。

限制:仅 primary 与 neutral 两种变体;不能通过 CSS 自定义样式;无事件与公开方法;资料未提供具体安装命令、框架配置细节、浏览器兼容性与版本要求,暂未提供。