ColorUI 开发文档ColorUI 开发文档
指南
组件
实验室
Api
更新日志
  • uni-app版
  • 2.x版本
  • GitHub 仓库
  • Gitee 仓库
指南
组件
实验室
Api
更新日志
  • uni-app版
  • 2.x版本
  • GitHub 仓库
  • Gitee 仓库
  • 组件

    • 引用组件
    • 主题 ui-change-theme
    • 导航栏 ui-navbar
    • 头像 ui-avatar
    • 标题 ui-title
    • 标签 ui-tag
    • 按钮 ui-btn
    • 图片 ui-img
    • 代码 ui-code
    • 进度条 ui-progress
    • 加载 ui-loading
    • 菜单 ui-menu
    • 浮动 ui-fixed
    • 卡片 ui-card
    • 栅栏 ui-grid
    • 气泡框 ui-popover
    • 模态框 ui-modal
    • 轻提示 $tips
    • 选项卡 ui-tab
    • 轮播图 ui-swiper
    • 步骤条 ui-steps
    • 输入框 ui-input
    • 单选框 ui-radio
    • 复选框 ui-checkbox
    • 开关 ui-switch

进度条 ui-progress

进度条组件

"usingComponents": {
    "ui-progress": "/mp-cu/colorUI/components/ui-progress/ui-progress"
}

默认

<ui-progress progress="40"/>

形状

<ui-progress progress="61.8"/>
<ui-progress round progress="30.8"/>

尺寸

<ui-progress sm progress="61.8"/>
<ui-progress progress="61.8"/>
<ui-progress lg progress="61.8"/>

颜色

<ui-progress bg="bg-green" progress="61.8"/>
<ui-progress  bg="bg-green-light" progress="61.8"/>
<ui-progress  bg="bg-green-thin" progress="61.8"/>
<ui-progress  bg="bg-green-gradient" progress="61.8"/>

条纹

<ui-progress striped progress="61.8"/>
<ui-progress striped active progress="40.8"/>

组合

<ui-progress progressArray="{{[40.8,20,8]}}" bgArray="{{['bg-red','bg-green','bg-blue']}}" striped active round/>

布局

<ui-progress border progressArray="{{[40.8,20,8]}}" bgArray="{{['bg-red','bg-green','bg-blue']}}" striped active round/>

参数

参数类型可选值默认值说明
uiString--其他class
bgString/Array-ui-BG-Main背景颜色
progressNumber/String-0进度
roundBoolean-false椭圆
radiusBoolean-true圆角
smBoolean-false小尺寸
lgBoolean-false大尺寸
stripedBoolean-false条纹
activeBoolean-false条纹动起来
shadowString/Booleantrue,false,sm,lg-阴影
borderBoolean-false边框
progressArrayArray--数组数据
bgArrayArray-见下文数组颜色

bgArray 默认值:['ui-BG-Main', 'ui-BG-Main-1', 'ui-BG-Main-2', 'ui-BG-Main-3']

mp-cu

Prev
代码 ui-code
Next
加载 ui-loading