Progress

版本要求:
@ray-js/ray≥0.6.15

描述

进度条组件，用于展示操作或任务的当前进度。

属性

属性类型必填默认值说明
percentnumber否0当前进度，取值范围 0~100
showInfoboolean否false是否在进度条右侧显示百分比
borderRadiusnumber | string否0圆角大小，默认单位 rpx
fontSizenumber | string否16右侧百分比字体大小，默认单位 px
strokeWidthnumber | string否6进度条线宽，默认单位 rpx
activeColorstring否#007aff已完成部分的颜色
backgroundColorstring否rgba(0,0,0,0.04)未完成部分的颜色
activeboolean否false是否开启从左到右的进度动画
activeMode"backwards" | "forwards"否backwards动画播放模式，backwards 从头播放，forwards 从上次结束点继续播放

合法值

activeMode
值说明最低版本
backwards每次从起点播放进度动画-
forwards从上次结束的位置继续播放进度动画-

示例代码

基础用法

import React from 'react';
import { View, Progress } from '@ray-js/ray';

export default function Demo() {
  return (
    <View style={{ padding: 20 }}>
      <Progress percent={50} strokeWidth={8} />
    </View>
  );
}

显示百分比

import React from 'react';
import { View, Progress } from '@ray-js/ray';

export default function Demo() {
  return (
    <View style={{ padding: 20 }}>
      <View style={{ marginBottom: 20 }}>
        <Progress percent={20} showInfo strokeWidth={8} />
      </View>
      <View style={{ marginBottom: 20 }}>
        <Progress percent={60} showInfo strokeWidth={8} />
      </View>
      <View>
        <Progress percent={100} showInfo strokeWidth={8} />
      </View>
    </View>
  );
}

自定义样式

import React from 'react';
import { View, Progress } from '@ray-js/ray';

export default function Demo() {
  return (
    <View style={{ padding: 20 }}>
      <View style={{ marginBottom: 20 }}>
        <Progress
          percent={70}
          showInfo
          strokeWidth={12}
          borderRadius={6}
          fontSize={14}
          activeColor="#52c41a"
          backgroundColor="#e8e8e8"
        />
      </View>
      <View>
        <Progress
          percent={40}
          showInfo
          strokeWidth={12}
          borderRadius={6}
          activeColor="#ff4d4f"
          backgroundColor="#fff1f0"
        />
      </View>
    </View>
  );
}

进度动画

import React, { useState } from 'react';
import { View, Progress, Button } from '@ray-js/ray';

export default function Demo() {
  const [percent, setPercent] = useState(0);

  return (
    <View style={{ padding: 20 }}>
      <Progress
        percent={percent}
        showInfo
        strokeWidth={8}
        active
        activeMode="forwards"
      />
      <View style={{ marginTop: 20, display: 'flex', flexDirection: 'row', gap: '10px' }}>
        <Button size="mini" onClick={() => setPercent(Math.min(percent + 20, 100))}>
          增加
        </Button>
        <Button size="mini" onClick={() => setPercent(0)}>
          重置
        </Button>
      </View>
    </View>
  );
}