介绍

以横条的方式展示当前进度。

引入

import ProgressBar from 'sard-uniapp/components/progress-bar/progress-bar.vue'

代码演示

基础使用

设置 percent 属性展示当前所处进度。

<template>
  <sar-progress-bar :percent="50" />
</template>

内部文本

设置 inside 属性让文本显示在进度条内部。

<template>
  <sar-progress-bar :percent="50" inside />
</template>

隐藏文本

设置 :showText="false" 属性让文本隐藏。

<template>
  <sar-progress-bar :percent="50" :show-text="false" />
  <sar-progress-bar
    :percent="50"
    :show-text="false"
    inside
    root-style="margin-top: 20rpx"
  />
</template>

粗细

使用 thickness 属性设置粗细。

<template>
  <sar-progress-bar :percent="50" thickness="20rpx" />
</template>

颜色

使用 trackColor 设置轨道颜色，使用 color 设置进度条颜色。

<template>
  <sar-progress-bar :percent="50" color="var(--sar-red)" />
</template>

有条纹的

设置 striped 属性显示条纹，设置 animated 属性可以让条纹动起来。

<template>
  <sar-progress-bar :percent="50" striped thickness="20rpx" />
  <sar-progress-bar
    :percent="50"
    striped
    animated
    thickness="20rpx"
    root-style="margin-top: 10rpx"
  />
</template>

状态

设置 status 属性展示不同的状态。

<template>
  <sar-progress-bar :percent="100" status="success" />
  <sar-progress-bar
    :percent="50"
    status="warning"
    root-style="margin-top: 20rpx"
  />
  <sar-progress-bar
    :percent="50"
    status="error"
    root-style="margin-top: 20rpx"
  />
</template>

API

ProgressBarProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
percent	当前进度	number	0
inside	在内部显示文本	boolean	false
color	进度条颜色	string	-
track-color	轨道颜色	string	-
thickness	进度条粗细	string	-
show-text	是否显示文本	string	true
striped	是否显示条纹样式	boolean	false
animated	是否显示条纹动画	boolean	false
status	进度条当前状态	'success' | 'warning' | 'error'	-

ProgressBarSlots

插槽	描述	属性
default	自定义默认内容	-

主题定制

CSS 变量

page,
.sar-portal {
  --sar-progress-bar-height: 8rpx;
  --sar-progress-bar-border-radius: var(--sar-rounded-full);

  --sar-progress-bar-track-bg: var(--sar-secondary-bg);

  --sar-progress-bar-piece-font-size: var(--sar-text-base);
  --sar-progress-bar-piece-transition-duration: var(--sar-duration-slow);
  --sar-progress-bar-piece-color: var(--sar-white);
  --sar-progress-bar-piece-bg: var(--sar-primary);

  --sar-progress-bar-text-font-size: var(--sar-text-base);
  --sar-progress-bar-text-margin-left: 16rpx;
  --sar-progress-bar-text-margin-right: 16rpx;

  --sar-progress-bar-inside-height: 32rpx;
  --sar-progress-bar-inside-text-font-size: var(--sar-text-sm);

  --sar-progress-bar-striped-width: 32rpx;

  --sar-progress-bar-status-line-height: var(--sar-leading-none);
  --sar-progress-bar-status-margin-left: 16rpx;
  --sar-progress-bar-success-color: var(--sar-success);
  --sar-progress-bar-warning-color: var(--sar-warning);
  --sar-progress-bar-error-color: var(--sar-danger);
}