rice-ui

暗黑模式

Progress 进度条 ​

手机扫码预览
01:50
组件名：rice-progress

用于展示操作的进度

平台兼容性 ​

uni-app x ​

AndroidiOS鸿蒙Next微信小程序h5
√√√√√

基础用法 ​

通过percentage 可以设置当前的百分比

html
<rice-progress :percentage="value" />

不显示百分比 ​

设置 show-text 为false 即可不显示百分比

html
<rice-progress :percentage="70" :show-text="false" />

百分比内显 ​

text-position 设置为 inside 百分之就会显示在进度条内

html
<rice-progress :percentage="60" show-text text-position="inside" />

自定义颜色 ​

  • color 设置进度条激活的颜色
  • inactive-color 设置进度条未选中的颜色
  • text-color 设置百分比的颜色
html
<rice-progress :percentage="60" color="#f56c6c" inactive-color="rgba(245, 108, 108,.5)" :show-text="false"/>
<rice-progress :percentage="value3" :color="formatColors" :text-color="formatColors" />

<script setup>
const value3 = ref(50)
const formatColors = computed(() => {
  const percent = value3.value
  if (percent < 20) return '#f56c6c'
  if (percent < 40) return '#e6a23c'
  if (percent < 50) return '#5cb87a'
  if (percent < 60) return '#f56c6c'
  if (percent < 80) return '#845ec2'
  return '#c34a36'
})
</script>

自定义文本 ​

通过 format 函数格式化文本的内容

html
<rice-progress :percentage="value3" :format="format" />
<script setup>
const format = (percent : number) : string => {
  if (percent < 20) return `拉低平均值`
  if (percent < 60) return `不合格`
  if (percent < 70) return `合格`
  if (percent <= 80) return `良好`
  if (percent >= 90) return '非常优秀'
  return `${percent}%`
}
</script>

自定义圆角 ​

radius 属性可以设置进度条的圆角值

html
<rice-progress :percentage="60" radius="0" />

自定义大小 ​

stroke-width 可以设置进度条的大小

html
<rice-progress :percentage="60" stroke-width="12px"/>

API ​

Props ​

属性名类型说明默认值
percentageString|Number进度百分比 0-100-
stroke-widthString|Number进度条宽度-
show-textBoolean是否显示文字，默认true-
text-colorString文字颜色-
text-sizeString|Number文字大小-
text-positionString文字位置，可选值：right、inside-
formatFunction自定义文字格式-
colorString激活的进度条颜色-
inactive-colorString未激活的进度条颜色-
radiusString|Number圆角大小-
custom-styleObject自定义样式-

类型定义 ​

组件导出如下类型

ts
// 组件类型
const progressRef = ref<RiceProgressComponentPublicInstance | null>(null)