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