• α堆栈 α
  • 应用提供商
  • 自动完成
  • 《阿凡达》
  • 徽章
  • 横幅
  • 流血 α
  • 盒子 α
  • 按钮
  • 按钮组
  • Callout卡
  • 标题
  • 复选框
  • 选择列表
  • 可折叠的
  • 颜色选择器
  • α
  • 组合框
  • 内容块 α
  • 上下文保存栏
  • 数据表
  • 日期选择器
  • 描述表
  • 显示文本
  • 降落区
  • 空的状态
  • 例外列表
  • 过滤器
  • 页脚的帮助
  • 形式
  • 表格布局
  • 框架
  • 全屏酒吧
  • 网格 α
  • 标题
  • 图标
  • 索引表
  • 内联 α
  • 内联错误
  • 键盘键
  • 布局
  • 链接
  • 列表
  • 列表框
  • 加载
  • 媒体卡
  • 模态
  • 导航
  • 选项列表
  • 页面
  • 页面动作
  • 分页
  • 弹出窗口
  • 进度条
  • 单选按钮
  • 滑块范围
  • 资源项目
  • 资源列表
  • 可滚动
  • 选择
  • 设置切换
  • 床单 弃用
  • 骨架正文
  • 骨架显示文本
  • 框架页面
  • 骨架的标签
  • 骨架缩略图
  • 微调控制项
  • 堆栈
  • 副标题
  • 选项卡
  • 标签
  • 文本 α
  • 文本容器
  • 文本字段
  • 文本样式
  • 缩略图
  • 瓷砖 α
  • 烤面包
  • 工具提示
  • 窗口的顶部
  • 视频缩略图
  • 视觉上隐藏
  • 令牌
  • 图标
  • 贡献
  • 进度条

    进度条组件用于可视化地表示任务或操作的完成情况。它显示任务已经完成了多少,还有多少未完成。

    使用此组件可以直观地表示任务或操作的完成情况。

    进口ProgressBar“@shopify /北极星”进口反应“反应”函数ProgressBarExample)返回<div风格宽度225><ProgressBar进展75/></div>)

    道具

    想让这个功能变得更好吗?请分享你的反馈

    接口 ProgressBarProps
    进步 数量

    某些任务的进展。

    默认为0

    大小 “小”|“媒介”|“大”

    进度条的大小。

    默认为“媒介”

    颜色 “亮点”|“主”|“成功”|“关键”

    进度条的颜色。

    默认为“亮点”

    动画 布尔

    是否触发填充动画。

    默认为“真正的”

    ariaLabelledBy 字符串

    描述进度条的元素的Id(个)。

    最佳实践

    进度条组件应该:

    • 让商家知道任务完成了多少,还剩下多少。
    • 不能用于整个页面加载。在这种情况下,使用框架页面组件。