react-native-ui-lib 7.38.1-snapshot.6410 → 7.38.1-snapshot.6412
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -4,10 +4,27 @@
|
|
|
4
4
|
"description": "Progress bar",
|
|
5
5
|
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ProgressBarScreen.tsx",
|
|
6
6
|
"props": [
|
|
7
|
-
{
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
{
|
|
8
|
+
"name": "progress",
|
|
9
|
+
"type": "number",
|
|
10
|
+
"description": "The progress of the bar from 0 to 100",
|
|
11
|
+
"default": "0"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"name": "fullWidth",
|
|
15
|
+
"type": "boolean",
|
|
16
|
+
"description": "FullWidth Ui preset"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"name": "style",
|
|
20
|
+
"type": "ViewStyle",
|
|
21
|
+
"description": "Override container style"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"name": "progressColor",
|
|
25
|
+
"type": "string",
|
|
26
|
+
"description": "Progress color"
|
|
27
|
+
},
|
|
11
28
|
{
|
|
12
29
|
"name": "customElement",
|
|
13
30
|
"type": "JSX.Element",
|
|
@@ -16,5 +33,137 @@
|
|
|
16
33
|
],
|
|
17
34
|
"snippet": [
|
|
18
35
|
"<ProgressBar progress={55$1} progressColor={Colors.red30$2}/>"
|
|
19
|
-
]
|
|
36
|
+
],
|
|
37
|
+
"docs": {
|
|
38
|
+
"hero": {
|
|
39
|
+
"title": "ProgressBar",
|
|
40
|
+
"description": "ProgressBar is a linear progress indicators, that express the length of a process. It should be used when the process completion rate can be detected. As the completion rate increases, the track fills from 0 to 100%. The ProgressBar can be accompanied by a textual representation of the progress in a percent format.",
|
|
41
|
+
"type": "hero",
|
|
42
|
+
"layout": "horizontal",
|
|
43
|
+
"content": [
|
|
44
|
+
{
|
|
45
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_cover.png"
|
|
46
|
+
}
|
|
47
|
+
]
|
|
48
|
+
},
|
|
49
|
+
"tabs": [
|
|
50
|
+
{
|
|
51
|
+
"title": "Overview",
|
|
52
|
+
"sections": [
|
|
53
|
+
{
|
|
54
|
+
"type": "list",
|
|
55
|
+
"items": [
|
|
56
|
+
{
|
|
57
|
+
"title": "Inline (Default)",
|
|
58
|
+
"description": "Inline Progress Bar attached to a container, such as a card, can indicate the process applies to that particular item.",
|
|
59
|
+
"content": [
|
|
60
|
+
{
|
|
61
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_usage_inline.png"
|
|
62
|
+
}
|
|
63
|
+
]
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"title": "Full Width",
|
|
67
|
+
"description": "Indicates progress with the screen’s content.",
|
|
68
|
+
"content": [
|
|
69
|
+
{
|
|
70
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_usage_fullWidth.png"
|
|
71
|
+
}
|
|
72
|
+
]
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"title": "Animated",
|
|
76
|
+
"description": "In cases where the progress will take about a minute to complete, use an animated progress bar with a stripes pattern ",
|
|
77
|
+
"content": [
|
|
78
|
+
{
|
|
79
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_usage_animated.png"
|
|
80
|
+
}
|
|
81
|
+
]
|
|
82
|
+
}
|
|
83
|
+
],
|
|
84
|
+
"layout": "horizontal",
|
|
85
|
+
"title": "Usage Examples"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"type": "table",
|
|
89
|
+
"columns": [
|
|
90
|
+
"Property",
|
|
91
|
+
"Preview"
|
|
92
|
+
],
|
|
93
|
+
"items": [
|
|
94
|
+
{
|
|
95
|
+
"title": "Default",
|
|
96
|
+
"content": [
|
|
97
|
+
{
|
|
98
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_default.png"
|
|
99
|
+
}
|
|
100
|
+
]
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"title": "AnimatedStripes",
|
|
104
|
+
"content": [
|
|
105
|
+
{
|
|
106
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_AnimatedStripes.png"
|
|
107
|
+
}
|
|
108
|
+
]
|
|
109
|
+
}
|
|
110
|
+
],
|
|
111
|
+
"title": "Types"
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"type": "table",
|
|
115
|
+
"columns": [
|
|
116
|
+
"Property",
|
|
117
|
+
"Preview"
|
|
118
|
+
],
|
|
119
|
+
"items": [
|
|
120
|
+
{
|
|
121
|
+
"title": "Inline (default)",
|
|
122
|
+
"content": [
|
|
123
|
+
{
|
|
124
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_default.png"
|
|
125
|
+
}
|
|
126
|
+
]
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
"title": "FullWidth",
|
|
130
|
+
"content": [
|
|
131
|
+
{
|
|
132
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_fullWidth.png"
|
|
133
|
+
}
|
|
134
|
+
]
|
|
135
|
+
}
|
|
136
|
+
],
|
|
137
|
+
"title": "Size"
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"type": "section"
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"type": "list",
|
|
144
|
+
"items": [
|
|
145
|
+
{
|
|
146
|
+
"title": "Phone spec",
|
|
147
|
+
"content": [
|
|
148
|
+
{
|
|
149
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_spec_phone.png"
|
|
150
|
+
}
|
|
151
|
+
]
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
"title": "Tablet spec",
|
|
155
|
+
"content": [
|
|
156
|
+
{
|
|
157
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_spec_tablet.png"
|
|
158
|
+
}
|
|
159
|
+
]
|
|
160
|
+
}
|
|
161
|
+
],
|
|
162
|
+
"title": "Spec",
|
|
163
|
+
"layout": "horizontal"
|
|
164
|
+
}
|
|
165
|
+
]
|
|
166
|
+
}
|
|
167
|
+
]
|
|
168
|
+
}
|
|
20
169
|
}
|