UNPKG

zent

Version:

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

66 lines (52 loc) • 4.94 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
--- title: Alert subtitle: 公告 path: component/alert group: 信息反馈 --- ## Alert 公告 #### **Alert 组件是 `Prompt`、`Banner`、`StatusBar`组件的基础组件，不建议直接使用** 公告，提供一个醒目的提示信息。 ### 使用指南 - 内容文字尽可能精简, 减少阅读障碍。 - 公告类按钮不要多于两个, 保持逻辑简单。 - 滚动公告使用结构相同的子节点（高度一致） ### API #### Alert | 参数 | 说明 | 类型 | 默认值 | 备选值 | | -------------- | ---------------------- | --------- | -------- | ------------------------------------------------------- | | className | 自定义额外类名 | string | | | | type | 警告提示的样式 | string | `'info'` | `'info'`, `'success'`, `'warning'`, `'error'`, `'hint'` | | loading | 是否是加载中模式 | bool | `false` | `true`, `false` | | outline | 是否是 outline 模式 | bool | `false` | `true`, `false` | | closable | 是否可以关闭 | bool | `false` | `true`, `false` | | closed | 外部控制组件的关闭状态 | bool | | | | onClose | 点击关闭触发器时的回调 | func | | | | closeContent | 关闭触发器的自定义内容 | ReactNode | | | | extraContent | 右侧额外内容 | ReactNode | | | | title | 内容标题 | ReactNode | | | | description | 内容描述 | ReactNode | | | | bordered | 是否有边框 | bool | `false` | `true`, `false` | | icon | 自定义左侧 icon | node | | | | closeIconColor | 自定义 close 颜色 | string | | | | progress | 顶部进度条进度 | number | | | #### ScrollAlert ##### 只支持等高的子节点, 暂不支持动态渲染子节点 | 参数 | 说明 | 类型 | 默认值 | 备选值 | | -------------- | ----------------------------- | ------ | -------- | ------------------------------------------------------- | | className | 自定义额外类名 | string | | | | type | 警告提示的样式 | string | `'info'` | `'info'`, `'success'`, `'warning'`, `'error'`, `'hint'` | | scrollInterval | 自定义滚动间隔 （单位：毫秒） | number | 5000 | 大于 1000 | | loading | 是否是加载中模式 | bool | `false` | `true`, `false` | | outline | 是否是 outline 模式 | bool | `false` | `true`, `false` | | onClose | 关闭所有节点时触发的回调 | func | | | | closed | 外部控制整个组件的关闭状态 | bool | | | #### AlertItem | 参数 | 说明 | 类型 | 默认值 | 备选值 | | ------------ | -------------------------------------------- | --------- | ------- | --------------- | | closable | 是否可以关闭 | bool | `false` | `true`, `false` | | closeContent | 关闭触发器的自定义内容 | ReactNode | | | | extraContent | 右侧额外内容 | ReactNode | | | | title | 内容标题 | ReactNode | | | | description | 内容描述 | ReactNode | | | | onClose | 关闭当前节点时触发的回调（closable 为 true） | func | | |