UNPKG

2.89 kBTypeScriptView Raw
1import { ComponentType } from 'react'
2import { StandardProps, CommonEventFunction } from './common'
3
4interface 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 */
113declare const Progress: ComponentType<ProgressProps>
114
115export { Progress, ProgressProps }