Skip to content

Commit 1ecdafa

Browse files
liyuan-mengliyuan-meng
committed
💄 [徽标] 基础组件能力排查
1 parent 2ba49c0 commit 1ecdafa

4 files changed

Lines changed: 169 additions & 82 deletions

File tree

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

Lines changed: 55 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,19 @@ desc: 支持 message、number、dot 三种展示形式
1212
import React from 'react';
1313
import { Badge } from 'cloud-react';
1414

15+
function TextBox() {
16+
return <div style={{ width: 40, height: 40, borderRadius: 6, background: '#e8e8e8' }}/>
17+
}
18+
19+
const commonStyle = {
20+
position: 'absolute',
21+
right: -22,
22+
top: -6
23+
};
24+
1525
export default class BadgeDemos extends React.Component {
26+
colorList = ['#FB2D2D', '#FF8000', '#FFBB00', '#13D841', '#28C1E0', '#3380FD', '#FA17F9', '#078DA8', '#0055CC', '#BA25B6'];
27+
1628
onClick = () => {
1729
console.log('lalala');
1830
};
@@ -22,30 +34,65 @@ export default class BadgeDemos extends React.Component {
2234
return (
2335
<React.Fragment>
2436
<h4 style={{ marginTop: 0 }}>message 模式</h4>
25-
<div style={{ display: 'flex', gap: 20 }}>
37+
<div style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
2638
<Badge onClick={onClick} />
2739
<Badge mode="message" type="success" />
2840
<Badge mode="message" type="warn" />
2941
<Badge mode="message" type="fail" />
3042
<Badge mode="message" type="finish" />
43+
<div style={{ position: 'relative' }}>
44+
<TextBox/>
45+
<Badge mode="dot" type="fail" text="" style={{
46+
position: 'absolute',
47+
right: -9,
48+
top: -2
49+
}} />
50+
</div>
51+
<div style={{ position: 'relative' }}>
52+
<span style={{ fontSize: 14 }}>文字内容</span>
53+
<Badge mode="dot" type="fail" text="" style={{
54+
position: 'absolute',
55+
right: -12,
56+
top: -1
57+
}} />
58+
</div>
3159
</div>
3260

3361
<h4>number 模式</h4>
34-
<div style={{ display: 'flex', gap: 20 }}>
62+
<div style={{ display: 'flex', gap: 40 }}>
3563
<Badge mode="number" onClick={onClick} />
3664
<Badge mode="number" type="success" number={6} />
3765
<Badge mode="number" type="warn" number={66} />
3866
<Badge mode="number" type="fail" number={666} />
3967
<Badge mode="number" type="finish" number={666} />
4068
</div>
4169

70+
<h4>文本样式</h4>
71+
<div style={{ display: 'flex', gap: 60 }}>
72+
<div style={{ position: 'relative' }}>
73+
<TextBox/>
74+
<Badge mode="number" type="fail" number="NEW" style={commonStyle} />
75+
</div>
76+
<div style={{ position: 'relative' }}>
77+
<TextBox/>
78+
<Badge mode="number" type="fail" isSquare number="NEW" style={commonStyle} />
79+
</div>
80+
</div>
81+
4282
<h4>dot 模式</h4>
43-
<div style={{ display: 'flex', gap: 20 }}>
44-
<Badge mode="dot" text="default" onClick={onClick} />
45-
<Badge mode="dot" type="success" text="success" />
46-
<Badge mode="dot" type="warn" text="warn" />
47-
<Badge mode="dot" type="fail" text="fail" />
48-
<Badge mode="dot" type="finish" text="finish" />
83+
<div style={{ display: 'flex', gap: 40 }}>
84+
<Badge mode="dot" type="finish" text="已完成" />
85+
<Badge mode="dot" text="进行中" onClick={onClick} />
86+
<Badge mode="dot" type="success" text="成功" />
87+
<Badge mode="dot" type="warn" text="提醒" />
88+
<Badge mode="dot" type="fail" text="失败" />
89+
</div>
90+
91+
<h4>自定义色值</h4>
92+
<div style={{ display: 'flex', flexWrap: 'wrap', gap: "20px 46px" }}>
93+
{this.colorList.map((color, index) => (
94+
<Badge key={index} mode="custom-dot" text={color} color={color} />
95+
))}
4996
</div>
5097
</React.Fragment>
5198
);

‎src/components/badge/index.js‎

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,17 @@ import './index.less';
88
const classSelector = `${prefixCls}-badge`;
99

1010
export default function Badge(props) {
11-
const { className, style, mode, type, number, text, onClick } = props;
11+
const {
12+
className,
13+
style,
14+
mode,
15+
type,
16+
number,
17+
text,
18+
isSquare,
19+
color,
20+
onClick,
21+
} = props;
1222

1323
const handleBadgeClick = () => {
1424
onClick();
@@ -26,19 +36,37 @@ export default function Badge(props) {
2636
onClick={handleBadgeClick}
2737
>
2838
{mode === 'message' && <Icon type="remark" className="remark" />}
29-
{mode === 'number' && <span className="number-container">{number}</span>}
39+
{mode === 'number' && (
40+
<span
41+
className={`number-container ${isSquare && 'square'}`}
42+
style={color ? { background: color } : {}}
43+
>
44+
{number}
45+
</span>
46+
)}
3047
{mode === 'dot' && <span className="text">{text}</span>}
48+
{mode === 'custom-dot' && (
49+
<span className="custom-dot-text">
50+
<span
51+
className="custom-dot"
52+
style={color ? { background: color } : {}}
53+
/>
54+
<span>{text}</span>
55+
</span>
56+
)}
3157
</span>
3258
);
3359
}
3460

3561
Badge.propTypes = {
3662
style: PropTypes.object,
3763
className: PropTypes.string,
38-
mode: PropTypes.oneOf(['message', 'number', 'dot']),
39-
type: PropTypes.oneOf(['default', 'success', 'warn', 'fail', 'finish']),
64+
mode: PropTypes.oneOf([ 'message', 'number', 'dot', 'custom-dot' ]),
65+
type: PropTypes.oneOf([ 'default', 'success', 'warn', 'fail', 'finish' ]),
4066
number: PropTypes.number,
4167
text: PropTypes.string,
68+
isSquare: PropTypes.bool,
69+
color: PropTypes.string,
4270
onClick: PropTypes.func,
4371
};
4472

@@ -49,5 +77,7 @@ Badge.defaultProps = {
4977
type: 'default',
5078
number: 0,
5179
text: '',
80+
isSquare: false,
81+
color: '',
5282
onClick: () => {},
5383
};

‎src/components/badge/index.less‎

Lines changed: 78 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -3,93 +3,101 @@
33
@breadcrumbs-prefix-cls: ~'@{prefix}-badge';
44

55
.@{breadcrumbs-prefix-cls} {
6-
cursor: pointer;
7-
display: inline-flex;
8-
align-items: center;
9-
justify-content: center;
6+
cursor: pointer;
7+
display: inline-flex;
8+
align-items: center;
9+
justify-content: center;
1010

11-
&.@{breadcrumbs-prefix-cls}-message {
12-
.remark {
13-
position: relative;
14-
font-size: 16px;
11+
&.@{breadcrumbs-prefix-cls}-message {
12+
.remark {
13+
position: relative;
14+
font-size: 16px;
1515

16-
&:after {
17-
position: absolute;
18-
top: -1px;
19-
right: -3px;
20-
display: block;
21-
content: '';
22-
width: 8px;
23-
height: 8px;
24-
border-radius: 100%;
25-
}
26-
}
27-
}
16+
&:after {
17+
position: absolute;
18+
top: -1px;
19+
right: -3px;
20+
display: block;
21+
content: '';
22+
width: 6px;
23+
height: 6px;
24+
border-radius: 100%;
25+
}
26+
}
27+
}
28+
29+
&.@{breadcrumbs-prefix-cls}-number {
30+
.number-container {
31+
display: inline-block;
32+
height: 8px;
33+
min-width: 8px;
34+
padding: 4px;
35+
width: fit-content;
36+
line-height: 8px;
37+
border-radius: 8px;
38+
color: @color-white;
39+
text-align: center;
40+
font-size: 12px;
2841

29-
&.@{breadcrumbs-prefix-cls}-number {
30-
.number-container {
31-
display: inline-block;
32-
height: 8px;
33-
min-width: 8px;
34-
padding: 4px;
35-
width: fit-content;
36-
line-height: 8px;
37-
border-radius: 8px;
38-
color: @color-white;
39-
text-align: center;
40-
font-size: 12px;
41-
}
42-
}
42+
&.square {
43+
border-radius: 3px;
44+
}
45+
}
46+
}
4347

44-
&.@{breadcrumbs-prefix-cls}-dot {
48+
&.@{breadcrumbs-prefix-cls}-dot,
49+
&.@{breadcrumbs-prefix-cls}-custom-dot {
4550
cursor: auto;
46-
.text {
51+
52+
.text,
53+
.custom-dot-text {
54+
display: flex;
55+
align-items: center;
4756
font-size: 14px;
57+
}
4858

49-
&:before {
50-
content: '';
51-
display: inline-block;
52-
position: relative;
53-
top: -1px;
54-
width: 6px;
55-
height: 6px;
56-
border-radius: 50%;
57-
margin-right: 7px;
58-
}
59+
.text:before,
60+
.custom-dot {
61+
content: '';
62+
display: inline-block;
63+
width: 6px;
64+
height: 6px;
65+
border-radius: 50%;
66+
margin-right: 7px;
5967
}
6068
}
6169

62-
&.@{breadcrumbs-prefix-cls}-default {
70+
&.@{breadcrumbs-prefix-cls}-default {
6371
.text:before,
64-
.remark:after,
65-
.number-container {
66-
background: @blue-4;
67-
}
68-
}
72+
.remark:after,
73+
.number-container {
74+
background: @blue-4;
75+
}
76+
}
6977

70-
&.@{breadcrumbs-prefix-cls}-success {
78+
&.@{breadcrumbs-prefix-cls}-success {
7179
.text:before,
72-
.remark:after,
73-
.number-container {
74-
background: @green-4;
75-
}
76-
}
80+
.remark:after,
81+
.number-container {
82+
background: @green-4;
83+
}
84+
}
7785

78-
&.@{breadcrumbs-prefix-cls}-warn {
86+
&.@{breadcrumbs-prefix-cls}-warn {
7987
.text:before,
80-
.remark:after,
81-
.number-container {
82-
background: @orange-4;
83-
}
84-
}
88+
.remark:after,
89+
.number-container {
90+
background: @orange-4;
91+
}
92+
}
8593

86-
&.@{breadcrumbs-prefix-cls}-fail {
94+
&.@{breadcrumbs-prefix-cls}-fail {
8795
.text:before,
88-
.remark:after,
89-
.number-container {
90-
background: @red-4;
91-
}
92-
}
96+
.remark:after,
97+
.number-container {
98+
background: @red-4;
99+
}
100+
}
93101

94102
&.@{breadcrumbs-prefix-cls}-finish {
95103
.text:before,

‎src/components/badge/index.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ group:
2222
| onClick | 点击徽标回调事件 | function | () => {} |
2323
| style | 设置最外层样式 | CSSProperties | {} |
2424
| className | 设置最外层类样式 | string | '' |
25+
| isSquare | 文本样式是否是方形（默认圆角为 8px；方形圆角为 3px） | bool | false |
26+
| color | 徽标颜色 | string | '' |
2527

2628
### 代码演示
2729

0 commit comments

Comments
 (0)