1
import * as React from 'react';
2 4
import { createHostComponent } from '@remax/shared';
3
import { BaseProps, GenericEvent } from '../../types/component';
4

5
export interface ProgressProps extends BaseProps {
6
  /** 百分比0~100 1.0.0 */
7
  percent?: number;
8
  /** 在进度条右侧显示百分比 1.0.0 */
9
  showInfo?: boolean;
10
  /** 圆角大小 2.3.1 */
11
  borderRadius?: number | string;
12
  /** (default: 16) 右侧百分比字体大小 2.3.1 */
13
  fontSize?: number | string;
14
  /** (default: 6) 进度条线的宽度 1.0.0 */
15
  strokeWidth?: number | string;
16
  /** (default: #09BB07) 进度条颜色(请使用activeColor) 1.0.0 */
17
  color?: string;
18
  /** (default: #09BB07) 已选择的进度条的颜色 1.0.0 */
19
  activeColor?: string;
20
  /** (default: #EBEBEB) 未选择的进度条的颜色 1.0.0 */
21
  backgroundColor?: string;
22
  /** (default: false) 进度条从左往右的动画 1.0.0 */
23
  active?: boolean;
24
  /** (default: backwards) backwards: 动画从头播;forwards:动画从上次结束点接着播 1.7.0 */
25
  activeMode?: 'backwards' | 'forwards';
26
  /**
27
   * 进度增加1%所需毫秒数	2.8.2
28
   */
29
  duration?: number;
30
  /** 动画完成事件 2.4.1 */
31
  onActiveEnd?: (event: GenericEvent) => any;
32
}
33
/**
34
 * https://developers.weixin.qq.com/miniprogram/dev/component/progress.html
35
 */
36 4
export const Progress: React.ComponentType<ProgressProps> = createHostComponent<ProgressProps>('progress');
37

38 4
Progress.defaultProps = {
39
  showInfo: false,
40
  borderRadius: 0,
41
  fontSize: 16,
42
  strokeWidth: 6,
43
  color: '#09BB07',
44
  activeColor: '#09BB07',
45
  backgroundColor: '#EBEBEB',
46
  active: false,
47
  activeMode: 'backwards',
48
  duration: 30,
49
};

Read our documentation on viewing source code .

Loading