UNPKG

zent

Version:

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

88 lines (64 loc) • 4.37 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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
--- title: Placeholder path: component/placeholder group: Feedback --- ## Placeholder Placeholder is used as loading state in sections. ### Guides - You can use this component to reduce users' anxiety when the part of page is loading. - Includes building block components and some presets. - Build your own placeholder using the building block components when presets does not meet your requirements. ### API Presets：`TextBlock`, `RichTextBlock`。 Components: `TextRow`, `TextRowDashed`, `Circle` and `Rectangle`. Use these components to build your own placeholder. ### TextBlock Text block, lines can be dashed. | Property | Description | Type | Required | Default | Alternative | | ------------ | ------------- | -------- | ---------- | ---------- | ----------------- | | rows | Text rows | `number` | Yes | | | | widths | Tow width pool, each number is a percentage | `number[]` | No | Omitted | | | dashed | Dashed | `bool` | No | `true` | `false` | | dashSegments | Dashed line segments, each segment can be a percent or fixed width | `(number | string)[][]` | No | Omitted | | | lineSpacing | Line spacing on top | `string` \| `number` | No | `'0.7em'` | | | style | Additional styles | `object` | No | `{}` | | | animate | Animate shapes | `bool` | No | `true` | `false` | | className | Additional class | `string` | No | `''` | | ### RichTextBlock Supports all props in `TextBlock`, with the following extra props. | Property | Description | Type | Required | Default | Alternative | | ------------ | ------------- | -------- | ---------- | ---------- | ----------------- | | shape | Shape name, circle or rectangle | `string` | No | `'circle'` | `'rect'` | | size | Shape size | `number` \| `string` | No | `80` | | ### TextRow Solid text row. | Property | Description | Type | Required | Default | Alternative | | ------------ | ------------- | -------- | ---------- | ---------- | ----------------- | | lineSpacing | Line spacing on top | `string` \| `number` | No | `'0.7em'` | | | style | Additional styles | `object` | No | `{}` | | | animate | Animate shapes | `bool` | No | `true` | `false` | | className | Additional class | `string` | No | `''` | | ### TextRowDashed Dashed text row. | Property | Description | Type | Required | Default | Alternative | | ------------ | ------------- | -------- | ---------- | ---------- | ----------------- | | segments | Line segments, each segment can be a percent or fixed width | `(number | string)[]` | No | Random | | | lineSpacing | Line spacing on top | `string` \| `number` | No | `'0.7em'` | | | style | Additional styles | `object` | No | `{}` | | | animate | Animate shapes | `bool` | No | `true` | `false` | | className | Additional class | `string` | No | `''` | | ### Circle | Property | Description | Type | Required | Default | Alternative | | ------------ | ------------- | -------- | ---------- | ---------- | ----------------- | | diameter | Circle diameter | `number` \| `string` | No | `80` | | | style | Additional styles | `object` | No | `{}` | | | animate | Animate shapes | `bool` | No | `true` | `false` | | className | Additional class | `string` | No | `''` | | ### Rectangle | Property | Description | Type | Required | Default | Alternative | | ------------ | ------------- | -------- | ---------- | ---------- | ----------------- | | width | Rectangle width | `number` \| `string` | No | `80` | | | height | Rectangle height | `number` \| `string` | No | `80` | | | style | Additional styles | `object` | No | `{}` | | | animate | Animate shapes | `bool` | No | `true` | `false` | | className | Additional class | `string` | No | `''` | |