UNPKG

zent

Version:

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

62 lines (49 loc) • 5.32 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
--- title: Alert path: component/alert group: Feedback --- ## Alert Alert is used to provide eye-catching information. ### Guide - Content should be as simple as possible to make it easier to be read. - The number of buttons should be less than 2 in order to keep logic simple. ### API #### Alert | Property | Description | Type | Default | Alternative | | -------------- | --------------------------------------------------- | --------- | -------- | ------------------------------------------------------ | | className | custom extra class name | string | | | | type | style of the Alert | string | `'info'` | `'info'`, `'success'`, `'warning'`, `'error'`,`'hint'` | | loading | determines whether the Alert use loading icon | bool | `false` | `true`, `false` | | outline | determines whether the Alert use outline mode style | bool | `false` | `true`, `false` | | closable | determines whether the Alert can be closed or not | bool | `false` | `true`, `false` | | closed | determines whether the Alert is closed | bool | | | | onClose | callback for click close trigger | func | | | | closeContent | close trigger content | ReactNode | | | | extraContent | extra content on the right of Alert | ReactNode | | | | title | Alert content title | ReactNode | | | | description | Alert content description | ReactNode | | | | bordered | Whether the alert has a border | bool | `false` | `true`, `false` | | icon | Customize the left icon | node | | | | closeIconColor | Custom close color | string | | | | progress | Top progress bar progress | number | | | #### ScrollAlert ##### ScrollAlert only supports equal-height children | Property | Description | Type | Default | Alternative | | -------------- | --------------------------------------------------- | ------ | -------- | ------------------------------------------------------- | | className | custom extra class name | string | | | | type | style of the Alert | string | `'info'` | `'info'`, `'success'`, `'warning'`, `'error'`, `'hint'` | | scrollInterval | custom scroll interval (unit: ms) | number | 5000 | greater than 1000 | | loading | determines whether the Alert use loading icon | bool | `false` | `true`, `false` | | outline | determines whether the Alert use outline mode style | bool | `false` | `true`, `false` | | onClose | callback for close all AlertItem | func | | | | closed | determines whether the ScrollAlert is closed | bool | | | #### AlertItem | Property | Description | Type | Default | Alternative | | ------------ | ------------------------------------------------------------ | --------- | ------- | --------------- | | closable | determines whether the Alert can be closed or not | bool | `false` | `true`, `false` | | closeContent | close trigger content | ReactNode | | | | extraContent | extra content on the right of Alert | ReactNode | | | | title | Alert content title | ReactNode | | | | description | Alert content description | ReactNode | | | | onClose | callback for close current AlertItem (when closable is true) | func | | |