UNPKG

zent

Version:

一套前端设计语言和基于React的实现

59 lines (40 loc) • 3.23 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
--- title: Loading path: component/loading group: Feedback --- ## Loading Shows the loading state of data without a specific duration. ### Suggestion - Used for operations that cannot be performed immediately and require only a short period of time; - Used when retrieving or refreshing small amounts of data, such as status. ### Note - It is not allowed to trigger the loading of multiple items or operations at once, except during the initial page load or refresh. ### API `Loading` has 3 different types: `BlockLoading`, `InlineLoading` and `FullScreenLoading`. Most of the props are shared between these types, but each type may have its own set of props. #### Common props | Property | Description | Type | Required | Default | Alternative | | ------------ | ------------------------------------ | --------- | -------- | ----------- | -------------------------------- | | loading | Loading state | `boolean` | No | `false` | `true` | | delay | Milliseconds to delay before loading | `number` | No | `0` | | | icon | Icon type | `string` | No | `'circle'` | `'youzan'` | | iconSize | Icon size | `number` | No | | | | iconText | Icon text | `string` | No | | | | colorPreset | Color preset | `string` | No | `'primary'` | `'grey'` | | textPosition | Text position relative to icon | `string` | No | `'bottom'` | `'top'` \| `'left'` \| `'right'` | | textSize | Text Font Size | `number` | No | | | className | Custom class | `string` | No | | | #### BlockLoading Block level `Loading`, content can be wrapped or a default height will be used. Used for loading a page section. | Property | Description | Type | Required | Default | Alternative | | -------- | ----------------------------------------------------------------- | ----------- | -------- | ------- | ----------- | | height | Uses content height if wrapping content, or uses a default height | `number` | No | `160` | | | children | Wrapped content | `ReactNode` | No | | | #### InlineLoading Inline `Loading`, can't wrap content. #### LoadingFullScreen Full screen `Loading`, can't wrap content. Used for page loading. | Property | Description | Type | Required | Default | Alternative | | -------------- | ----------------------- | -------- | -------- | ------- | ----------- | | zIndex | Mask z-index | `number` | No | | | | showBackground | Show loading Background | `bool` | No | | |