Skip to content

Commit 4d93245

Browse files
author
liyuan-meng
committed
✨[Message][Tips]提示信息 UI 修改
1 parent f2d456f commit 4d93245

8 files changed

Lines changed: 143 additions & 51 deletions

File tree

‎src/components/message/demos/basic-message.md‎

Lines changed: 83 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -10,56 +10,101 @@ desc: ''
1010
* desc: 提示内容支持ReactNode
1111
*/
1212
import React, { Component } from 'react';
13-
import { Button, Message } from 'cloud-react';
13+
import { Button, Message, Radio } from 'cloud-react';
1414

1515
const blank = '\u00A0';
1616

1717
class MessageDemo extends Component {
18-
onSuccessClick() {
19-
Message.success('操作成功！');
20-
}
21-
onErrorClick() {
22-
Message.error('更新失败！');
23-
}
24-
onInfoClick() {
25-
Message.info('提示信息！');
26-
}
27-
onWarnClick() {
28-
Message.warning('警告信息！');
29-
}
30-
onSuccessLinkClick() {
31-
Message.success(<span>操作成功！<a href="https://ui.shuyun.com">有链接</a></span>);
18+
constructor(props) {
19+
super(props);
20+
this.state = {
21+
option: {
22+
duration: 3 * 1000,
23+
borderRadiusSize: 'default',
24+
}
25+
};
3226
}
33-
onErrorLinkClick() {
34-
Message.error(<span>更新失败！<a href="https://ui.shuyun.com">有链接</a></span>);
27+
28+
onSuccessClick = () => {
29+
Message.success('操作成功！', this.state.option);
30+
}
31+
32+
onErrorClick = () => {
33+
Message.error('更新失败！', this.state.option);
34+
}
35+
36+
onInfoClick = () => {
37+
Message.info('提示信息！', this.state.option);
3538
}
36-
onInfoLinkClick() {
37-
Message.info(<span>提示文字！<a href="https://ui.shuyun.com">有链接</a></span>);
39+
40+
onWarnClick = () => {
41+
Message.warning('警告信息！', this.state.option);
3842
}
39-
onWarnLinkClick() {
40-
Message.warning(<span>警告信息！<a href="https://ui.shuyun.com">有链接</a></span>);
43+
44+
onSuccessLinkClick = () => {
45+
Message.success(<span>操作成功！<a href="https://ui.shuyun.com">有链接</a></span>, this.state.option);
4146
}
4247

43-
render() {
44-
return (
45-
<div className="app-contain">
46-
<Button type="normal" onClick={this.onInfoClick}>
48+
onErrorLinkClick = () => {
49+
Message.error(<span>更新失败！<a href="https://ui.shuyun.com">有链接</a></span>, this.state.option);
50+
}
51+
52+
onInfoLinkClick = () => {
53+
Message.info(<span>提示文字！<a href="https://ui.shuyun.com">有链接</a></span>, this.state.option);
54+
}
55+
56+
onWarnLinkClick = () => {
57+
Message.warning(<span>警告信息！<a href="https://ui.shuyun.com">有链接</a></span>, this.state.option);
58+
}
59+
60+
render() {
61+
return (
62+
<div className="app-contain">
63+
<div style={{ marginBottom: 15 }}>
64+
<Radio.Group value={this.state.option.duration} onChange={v => {
65+
this.setState({
66+
option: {
67+
...this.state.option,
68+
duration: v
69+
}
70+
});
71+
}}>
72+
<Radio value={0}>不自动关闭</Radio>
73+
<Radio value={3000}>默认值3s后关闭</Radio>
74+
<Radio value={10000}>默认值10s后关闭</Radio>
75+
</Radio.Group>
76+
</div>
77+
<div style={{ marginBottom: 15 }}>
78+
<Radio.Group value={this.state.option.borderRadiusSize} onChange={v => {
79+
this.setState({
80+
option: {
81+
...this.state.option,
82+
borderRadiusSize: v
83+
}
84+
});
85+
}}>
86+
<Radio value="small">圆角(small)：3px</Radio>
87+
<Radio value="default">圆角(default)：6px</Radio>
88+
<Radio value="large">圆角(large)：12px</Radio>
89+
</Radio.Group>
90+
</div>
91+
<Button type="normal" onClick={this.onInfoClick}>
4792
提示
4893
</Button>
4994
{blank}
50-
<Button type="normal" onClick={this.onSuccessClick}>
51-
成功
52-
</Button>
53-
{blank}
54-
<Button type="normal" onClick={this.onWarnClick}>
95+
<Button type="normal" onClick={this.onSuccessClick}>
96+
成功
97+
</Button>
98+
{blank}
99+
<Button type="normal" onClick={this.onWarnClick}>
55100
警告
56101
</Button>
57102
{blank}
58-
<Button type="normal" onClick={this.onErrorClick}>
59-
危险
60-
</Button>
61-
<div style={{ padding: '5px' }} />
62-
<Button type="normal" onClick={this.onInfoLinkClick}>
103+
<Button type="normal" onClick={this.onErrorClick}>
104+
危险
105+
</Button>
106+
<div style={{ padding: '5px' }} />
107+
<Button type="normal" onClick={this.onInfoLinkClick}>
63108
提示
64109
</Button>
65110
{blank}
@@ -74,9 +119,9 @@ class MessageDemo extends Component {
74119
<Button type="normal" onClick={this.onErrorLinkClick}>
75120
危险
76121
</Button>
77-
</div>
78-
);
79-
}
122+
</div>
123+
);
124+
}
80125
}
81126

82127
export default MessageDemo;

‎src/components/message/index.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ function entity(config) {
5757
);
5858

5959
const {
60-
duration, contextContainer, isDeepen, showClose, showIcon, onClose,
60+
duration, contextContainer, isDeepen, showClose, showIcon, onClose, borderRadiusSize,
6161
} = opts;
6262

6363
const props = {
@@ -69,6 +69,7 @@ function entity(config) {
6969
showClose,
7070
showIcon,
7171
onClose,
72+
borderRadiusSize,
7273
};
7374

7475
wraper = wraperMap.get(contextContainer);
@@ -165,12 +166,15 @@ class MessageEntity extends Component {
165166

166167
render() {
167168
const {
168-
type, msg, showClose, showIcon, isDeepen,
169+
type, msg, showClose, showIcon, isDeepen, borderRadiusSize = 'default',
169170
} = this.props;
170171
const cls = classNames(
171172
`${prefixCls}-message-${type}`,
172173
`${prefixCls}-message-content`,
173-
{ [`${prefixCls}-message-deepen`]: isDeepen },
174+
{
175+
[`${prefixCls}-message-deepen`]: isDeepen,
176+
[`${prefixCls}-message-${borderRadiusSize}-radius`]: true,
177+
},
174178
);
175179
return (
176180
<div className={cls} ref={this.noticeRef}>
@@ -198,6 +202,7 @@ MessageEntity.propTypes = {
198202
isDeepen: PropTypes.bool,
199203
className: PropTypes.string,
200204
onClose: PropTypes.func,
205+
borderRadiusSize: PropTypes.string,
201206
};
202207

203208
const Message = {

‎src/components/message/index.less‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,9 @@
2929
@warn-icon-color: @orange-4;
3030

3131
.cloud-message-type(@bg, @bgBorderColor, @msgTextColor, @tagColor) {
32-
box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1), 0 2px 8px 0 rgba(0, 0, 0, 0.04);
33-
border-radius: 2px;
32+
//box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1), 0 2px 8px 0 rgba(0, 0, 0, 0.04);
33+
box-shadow: 0 4px 12px 0 rgba(0,0,0,0.1), 0 0 1px 0 rgba(0,0,0,0.3);
34+
border-radius: 6px;
3435
background: @bg;
3536
.msg-text {
3637
flex: 1;
@@ -58,6 +59,14 @@
5859
color: @tagColor;
5960
margin-top: 1px;
6061
}
62+
63+
&.@{message-prefix-cls}-small-radius {
64+
border-radius: 3px;
65+
}
66+
67+
&.@{message-prefix-cls}-large-radius {
68+
border-radius: 12px;
69+
}
6170
}
6271

6372
.@{message-prefix-cls} {

‎src/components/message/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ group:
3131
| option.showIcon | 是否展示Icon | bool | true |
3232
| option.isDeepen | 是否使用重提示UI | bool | false |
3333
| option.onClose | 手动关闭后的触发事件 | func | - |
34+
| option.borderRadiusSize | 圆角尺寸 `large` `small` `default` | | `default` |
3435

3536
### message.method()
3637

‎src/components/tips/demos/type.md‎

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,38 @@ order: 1
1010
* desc: 四种类型 `normal`、`warning`、`major`、`success`，默认为`normal`
1111
*/
1212
import React from 'react';
13-
import { Tips } from 'cloud-react';
13+
import { Tips, Radio } from 'cloud-react';
1414

1515
class TipsDemo extends React.Component {
16+
constructor(props) {
17+
super(props);
18+
this.state = {
19+
borderRadiusSize: 'default'
20+
};
21+
}
22+
1623
render() {
1724
return (
1825
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
19-
<Tips msg="normal 默认提示信息" />
20-
<Tips type="warning" msg="warning 提示信息" />
21-
<Tips type="major" msg="major 提示信息" />
22-
<Tips type="success" msg="success 提示信息" />
26+
<div style={{ marginBottom: 15 }}>
27+
<Radio.Group value={this.state.borderRadiusSize} onChange={v => {
28+
this.setState({
29+
borderRadiusSize: v
30+
});
31+
}}>
32+
<Radio value="small">圆角(small)：3px</Radio>
33+
<Radio value="default">圆角(default)：6px</Radio>
34+
<Radio value="large">圆角(large)：12px</Radio>
35+
</Radio.Group>
36+
</div>
37+
<Tips msg="normal 默认提示信息" borderRadiusSize={this.state.borderRadiusSize} />
38+
<Tips type="warning" msg="warning 提示信息" borderRadiusSize={this.state.borderRadiusSize} />
39+
<Tips type="major" msg="major 提示信息" borderRadiusSize={this.state.borderRadiusSize} />
40+
<Tips type="success" msg="success 提示信息" borderRadiusSize={this.state.borderRadiusSize} />
2341
</div>
2442
);
2543
}
2644
}
45+
2746
export default TipsDemo;
2847
```

‎src/components/tips/index.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,11 +163,15 @@ class Tips extends Component {
163163
};
164164

165165
render() {
166-
const { type, mode, style, className } = this.props;
166+
const { type, mode, style, className, borderRadiusSize } = this.props;
167167
const { visible } = this.state;
168168
return (
169169
visible && (
170-
<div className={cls(`${prefixCls}-tips`, mode, type, className)} style={style} ref={this.wrapperRef}>
170+
<div
171+
className={cls(`${prefixCls}-tips`, mode, type, `${borderRadiusSize}-radius`, className)}
172+
style={style}
173+
ref={this.wrapperRef}
174+
>
171175
<div className={cls(`${prefixCls}-tips-container`, `${mode}-container`)}>
172176
{mode === 'default' && this.renderDefaultTips()}
173177
{mode === 'banner' && this.renderBannerTips()}

‎src/components/tips/index.less‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
.type-mixin(@bg, @border, @close, @action, @hover, @active) {
1414
background: @bg;
1515
border: 1px solid @border;
16-
border-radius: 2px;
16+
border-radius: 6px;
1717
.close-icon {
1818
color: @close;
1919
}
@@ -57,6 +57,14 @@
5757
background: none;
5858
border: none
5959
}
60+
61+
&.small-radius {
62+
border-radius: 3px;
63+
}
64+
65+
&.large-radius {
66+
border-radius: 12px;
67+
}
6068
}
6169

6270
.@{tips-prefix-cls}-container {

‎src/components/tips/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ group:
3131
| closeIcon | 自定义关闭按钮 icon，默认 closable 为 true | string | '' |
3232
| onClose | 关闭提示后触发回调 | function | () => {} |
3333
| collapsible | 提示是否可收起展开。收起状态下：无描述时 msg 展示 4 行；有描述时 msg 展示 1 行、description 展示 4 行 | boolean | `false` |
34+
| borderRadiusSize | 圆角尺寸 `large` `small` `default` | | `default` |
3435

3536
### 代码演示
3637

0 commit comments

Comments
 (0)