1 | import { ComponentType } from 'react'
|
2 | import { StandardProps, CommonEventFunction } from './common'
|
3 | interface ProgressProps extends StandardProps {
|
4 | /** 百分比 0~100
|
5 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
6 | */
|
7 | percent?: number
|
8 |
|
9 | /** 在进度条右侧显示百分比
|
10 | * @default false
|
11 | * @supported weapp, alipay, swan, qq, jd, h5, rn
|
12 | */
|
13 | showInfo?: boolean
|
14 |
|
15 | /** 圆角大小
|
16 | * @default 0
|
17 | * @supported weapp, swan, qq, jd, h5
|
18 | */
|
19 | borderRadius?: number | string
|
20 |
|
21 | /** 右侧百分比字体大小
|
22 | * @default 16
|
23 | * @supported weapp, swan, qq, jd, h5
|
24 | */
|
25 | fontSize?: number | string
|
26 |
|
27 | /** 进度条线的宽度
|
28 | * @default 6
|
29 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
30 | */
|
31 | strokeWidth?: number | string
|
32 |
|
33 | /** 进度条颜色 (请使用 activeColor)
|
34 | * @default "#09BB07"
|
35 | * @supported weapp, swan, qq, jd, h5
|
36 | */
|
37 | color?: string
|
38 |
|
39 | /** 已选择的进度条的颜色
|
40 | * @default "#09BB07"
|
41 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
42 | */
|
43 | activeColor?: string
|
44 |
|
45 | /** 未选择的进度条的颜色
|
46 | * @default "#EBEBEB"
|
47 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
48 | */
|
49 | backgroundColor?: string
|
50 |
|
51 | /** 进度条从左往右的动画
|
52 | * @default false
|
53 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
54 | */
|
55 | active?: boolean
|
56 |
|
57 | /** backwards: 动画从头播
|
58 | *
|
59 | * forwards: 动画从上次结束点接着播
|
60 | * @default backwards
|
61 | * @supported weapp, swan, tt, qq, jd, h5, rn
|
62 | */
|
63 | activeMode?: 'backwards' | 'forwards'
|
64 |
|
65 | /** 进度增加 1% 所需毫秒数
|
66 | * @default 30
|
67 | * @supported weapp, swan, jd, h5
|
68 | */
|
69 | duration?: number
|
70 |
|
71 | /** 无障碍访问,(属性)元素的额外描述
|
72 | * @supported qq
|
73 | */
|
74 | ariaLabel?: string
|
75 |
|
76 | /** 动画完成事件
|
77 | * @supported weapp, qq, jd, h5
|
78 | */
|
79 | onActiveEnd?: CommonEventFunction
|
80 | }
|
81 |
|
82 | /** 进度条。组件属性的长度单位默认为 px
|
83 | * @classification base
|
84 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
|
85 | * @example_react
|
86 | * ```tsx
|
87 | * export default class PageView extends Component {
|
88 | * constructor() {
|
89 | * super(...arguments)
|
90 | * }
|
91 | *
|
92 | * render() {
|
93 | * return (
|
94 | * <View className='components-page'>
|
95 | * <Progress percent={20} showInfo strokeWidth={2} />
|
96 | * <Progress percent={40} strokeWidth={2} active />
|
97 | * <Progress percent={60} strokeWidth={2} active />
|
98 | * <Progress percent={80} strokeWidth={2} active activeColor='blue' />
|
99 | * </View>
|
100 | * )
|
101 | * }
|
102 | * }
|
103 | * ```
|
104 | * @example_vue
|
105 | * ```html
|
106 | * <template>
|
107 | * <view class="components-page">
|
108 | * <progress percent="20" stroke-width="2" :show-info="true" />
|
109 | * <progress percent="40" stroke-width="2" :active="true" />
|
110 | * <progress percent="60" stroke-width="2" :active="true" />
|
111 | * <progress percent="80" stroke-width="2" :active="true" active-color="blue" />
|
112 | * </view>
|
113 | * </template>
|
114 | * ```
|
115 | * @see https://developers.weixin.qq.com/miniprogram/dev/component/progress.html
|
116 | */
|
117 | declare const Progress: ComponentType<ProgressProps>
|
118 | export { Progress, ProgressProps }
|