ColorUI 使用文档 ColorUI 使用文档
文档
GitHub (opens new window)
文档
GitHub (opens new window)
  • 快速开始

    • 介绍
    • 快速使用
  • 基础元素

    • 布局
    • 背景
    • 文本
    • 图标
    • 按钮
    • 标签
    • 头像
    • 进度条
      • 进度条形状
      • 进度条尺寸
      • 进度条颜色
      • 进度条条纹
      • 进度条比列
      • 进度条布局
    • 边框阴影
    • 加载
  • 交互组件

    • 操作条

      • 底部操作条
      • 标题操作条
      • 顶部操作条
      • 搜索&按钮组&输入操作条
    • 导航栏
    • 列表
    • 卡片
    • 表单
    • 时间轴
    • 聊天
    • 轮播
    • 模态框
    • 步骤条
  • 插件扩展

    • 索引列表
    • 微动画
    • 全屏抽屉
    • 垂直导航
  • 视图模式
  • 目录模式
目录

进度条

父容器加上 class 类名 cu-progress,该容器内放一个元素加上背景 .bg-red|...,设置样式 width: '10%',10% 就是该进度条的所占比例。

子容器内的文字会展示在比例中间,进度条展示的时候,作者已经封装好了动画样式,因此 width 属性,配合动态变量即可做到好看的动画效果

# 进度条形状

css 代码

.cu-progress  默认 
.cu-progress round  圆
.cu-progress radius  椭圆

演示代码

<view class="cu-progress">
    <view class="bg-red" :style="[{ width:loading?'92.8%':''}]">61.8%</view>
</view>
<view class="cu-progress radius margin-top">
    <view class="bg-red" :style="[{ width:loading?'61.8%':''}]">61.8%</view>
</view>
<view class="cu-progress round margin-top">
    <view class="bg-red" :style="[{ width:loading?'61.8%':''}]">61.8%</view>
</view>

<script>
	export default {
		data() {
			return {
				loading: false,
			};
		},
		onLoad: function() {
			let that = this;
			setTimeout(function() {
				that.loading = true
			}, 500)
		},
		methods: {
		}
	}
</script>

# 进度条尺寸

css 代码

.cu-progress     默认  
.cu-progress sm  小    
.cu-progress xs  较小 

演示代码

<view class="cu-progress round">
    <view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
</view>
<view class="cu-progress round margin-top sm">
    <view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
</view>
<view class="cu-progress round margin-top xs">
    <view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
</view>

// 以下js代码参照 进度条形状 演示代码js

# 进度条颜色

子容器加上 class 类名 bg-red|...

演示代码

<view class="cu-progress round">
    <view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
</view>

# 进度条条纹

父容器加上 class striped,进度条就会以条纹形式展示。

再加上 class 类名 active,进度条纹便以动画形式展示。

演示代码

<!-- 静态条纹 -->
<view class="cu-progress round striped">
    <view class="bg-green" :style="[{ width:loading?'60%':''}]"></view>
</view>
<!-- 动画条纹 -->
<view class="cu-progress round striped active">
    <view class="bg-black" :style="[{ width:loading?'40%':''}]"></view>
</view>

# 进度条比列

子容器,多个元素设置不同的宽度即可

演示代码

<view class="cu-progress radius striped active">
    <view class="bg-red" :style="[{ width:loading?'30%':''}]">30%</view>
    <view class="bg-olive" :style="[{ width:loading?'45%':''}]">45%</view>
    <view class="bg-cyan" :style="[{ width:loading?'25%':''}]">25%</view>
</view>

# 进度条布局

用flex布局,自定义右侧内容

演示代码

<view class="flex">
    <view class="cu-progress round">
        <view class="bg-green" :style="[{ width:loading?'100%':''}]"></view>
    </view>
    <text class="cuIcon-roundcheckfill text-green margin-left-sm"></text>
</view>
<view class="flex margin-top">
    <view class="cu-progress round">
        <view class="bg-green" :style="[{ width:loading?'80%':''}]"></view>
    </view>
    <text class="margin-left">80%</text>
</view>
上次更新: 2024/05/01, 21:37:52
头像
边框阴影

← 头像 边框阴影→

Theme by Vdoing | Copyright © 2022-2024 miren | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式