UNPKG

antd-mini

Version:

antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。

github.com/ant-design/ant-design-mini

ant-design/ant-design-mini

127 lines (101 loc) • 8.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
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
--- nav: path: /components group: title: 反馈引导 order: 12 toc: content --- # NoticeBar 通告栏 展示一组消息通知。通常用于当前页面内信息的通知，是一种较醒目的页面内通知方式。 ## 引入 在 `index.json` 中引入组件 ```json "usingComponents": { #if ALIPAY "ant-notice": "antd-mini/es/NoticeBar/index" #endif #if WECHAT "ant-notice": "antd-mini/NoticeBar/index" #endif } ``` ## 代码示例 ### 基本使用 ```xml <ant-notice type="default">default</ant-notice> <ant-notice type="info">info</ant-notice> <ant-notice type="error">error</ant-notice> ``` ### 可关闭通告栏 ```xml <ant-notice mode="closeable"> 这条通知可以关闭 </ant-notice> ``` ### 多行展示通告栏 ```xml <ant-notice type="default" ellipsisRow="{{2}}"> 文本溢出时，开启换行。文字不够继续添加文字凑数。文字不够继续添加文字凑数。 </ant-notice> ``` ### 可滚动通告栏 ```xml <ant-notice type="default" enableMarquee="{{true}}" loop="{{true}}" onTap="handleTapLink" mode="link"> 文本溢出时，开启循环滚动。文字不够继续添加文字凑数。 </ant-notice> ``` ### 自定义 ```xml <ant-notice type="primary" icon="GlobalOutline" mode="link"> 自定义左侧图标 </ant-notice> <ant-notice type="primary" mode="link" icon="https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*XMCgSYx3f50AAAAAAAAAAABkARQnAQ" >自定义左侧图标图片</ant-notice> <ant-notice mode="link" onTap="handleTapLink"> 自定义右侧按钮 <view slot="extra" class="extra"> <view onTap="handleTapAction">不再提示</view> <view onTap="handleTapAction">查看详情</view> </view> </ant-notice> ``` ### Demo 代码 <code src='../../demo/pages/NoticeBar/index'></code> ## API | 属性 | 说明 | 类型 | 默认值 | | ------------- | ---------------------------------------------------------------------------------------------- | ------------ | ------- | | className | 类名 | string | - | | enableMarquee | 是否开启滚动动画 | boolean | false | | ellipsisRow | 文案多行展示最大行数，和`enableMarquee`不能同时配置 | number\|boolean | false | | extra | 自定义右侧内容 | slot | - | | icon | 左侧 icon，支持所有内置 iconType 和自定义链接，也支持自定义 slot （微信版本需要设置 slotIcon） | string | - | | loop | 是否循环滚动，`enableMarquee` 为 true 时有效 | boolean | false | | mode | 通告类型，`link` 表示连接，整行可点；`closeable` 表示点击 x 可以关闭；不填时表示右侧没有图标 | string | - | | style | 样式 | string | - | | title | 标题 | string\|slot | - | | type | 类型，可选 `default`, `error`, `primary`, `info` | string | default | | slotIcon | 微信版本需要通过此字段启用 icon 位置的插槽 | boolean | - | | onTap | 点击通知栏右侧的图标（箭头或者叉），触发回调 | () => void | - | ### 主题定制 #### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。 | 变量名 | 默认值 | 深色模式默认值 | 备注 | | --------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ---------------- | | --notice-background-color | <div style="width: 150px; height: 40px; background-color: #fff9ed; color: #333;">#fff9ed</div> | <div style="width: 150px; height: 40px; background-color: #fff9ed; color: #000000;">#fff9ed</div> | 通知背景颜色 | | --notice-border-color | <div style="width: 150px; height: 40px; background-color: #fff3d9; color: #333;">#fff3d9</div> | <div style="width: 150px; height: 40px; background-color: #fff3d9; color: #000000;">#fff3d9</div> | 通知边框颜色 | | --notice-color | <div style="width: 150px; height: 40px; background-color: #ff6010;">#ff6010</div> | <div style="width: 150px; height: 40px; background-color: #ff6010; color: #ffffff;">#ff6010</div> | 通知颜色 | | --notice-error-border-color | <div style="width: 150px; height: 40px; background-color: #fff3d9; color: #333;">#fff3d9</div> | <div style="width: 150px; height: 40px; background-color: #fff3d9; color: #000000;">#fff3d9</div> | 错误通知边框颜色 | | --notice-error-color | <div style="width: 150px; height: 40px; background-color: #ffffff; color: #333333;">#ffffff</div> | <div style="width: 150px; height: 40px; background-color: #ffffff; color: #333333;">#ffffff</div> | 错误通知颜色 | | --notice-error-background-color | <div style="width: 150px; height: 40px; background-color: #ff3141;">#ff3141</div> | <div style="width: 150px; height: 40px; background-color: #ff4a58; color: #ffffff;">#ff4a58</div> | 错误通知背景颜色 | | --notice-primary-border-color | <div style="width: 150px; height: 40px; background-color: rgba(22, 119, 255, 0.72);">rgba(22, 119, 255, 0.72)</div> | <div style="width: 150px; height: 40px; background-color: rgba(22, 119, 255, 0.72); color: #ffffff;">rgba(22, 119, 255, 0.72)</div> | 主要通知边框颜色 | | --notice-primary-color | <div style="width: 150px; height: 40px; background-color: #1677ff;">#1677ff</div> | <div style="width: 150px; height: 40px; background-color: #3086ff; color: #ffffff;">#3086ff</div> | 主要通知颜色 | | --notice-primary-background-color | <div style="width: 150px; height: 40px; background-color: rgba(208, 228, 255, 1); color: #333;">rgba(208, 228, 255, 1)</div> | <div style="width: 150px; height: 40px; background-color: rgba(208, 228, 255, 1); color: #000000;">rgba(208, 228, 255, 1)</div> | 主要通知背景颜色 | | --notice-info-text-color | <div style="width: 150px; height: 40px; background-color: #ffffff; color: #333333;">#ffffff</div> | <div style="width: 150px; height: 40px; background-color: #ffffff; color: #333333;">#ffffff</div> | 信息通知文字颜色 | | --notice-info-background-color | <div style="width: 150px; height: 40px; background-color: #666666;">#666666</div> | <div style="width: 150px; height: 40px; background-color: #808080; color: #ffffff;">#808080</div> | 信息通知背景颜色 |