Skip to content

Commit a383a2f

Browse files
anlyyaoanlyyao
authored
feat(Badge): the shape attr add four optional values (#4137)
* feat(Badge): the shape attr add four optional values * format: adjust font variable line breaks in _font.less * feat(Badge): update demo * fix: fix cr * docs: regenerate api docs * fix: fix demo * chore(Badge): optimze ribbon badge * fix: fix cr
1 parent 0f806e2 commit a383a2f

File tree

14 files changed

+229
-75
lines changed

14 files changed

+229
-75
lines changed

‎packages/components/badge/README.en-US.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ content | String | - | \- | N
1313
count | String / Number | 0 | \- | N
1414
dot | Boolean | false | \- | N
1515
max-count | Number | 99 | \- | N
16-
offset | Array | - | Typescript：`Array<string \| number>` | N
17-
shape | String | circle | options: circle/square/bubble/ribbon | N
16+
offset | Array | - | Typescript: `Array<string \| number>` | N
17+
shape | String | circle | options: circle/square/bubble/ribbon/ribbon-right/ribbon-left/triangle-right/triangle-left | N
1818
show-zero | Boolean | false | \- | N
1919
size | String | medium | options: medium/large | N
2020

‎packages/components/badge/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ count | String / Number | 0 | 徽标右上角内容。可以是数字，也可
5555
dot | Boolean | false | 是否为红点 | N
5656
max-count | Number | 99 | 封顶的数字值 | N
5757
offset | Array | - | 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array<string \| number>` | N
58-
shape | String | circle | 形状。可选项：circle/square/bubble/ribbon | N
58+
shape | String | circle | 徽标形状，其中 ribbon 和 ribbon-right 等效。可选项：circle/square/bubble/ribbon/ribbon-right/ribbon-left/triangle-right/triangle-left | N
5959
show-zero | Boolean | false | 当数值为 0 时，是否展示徽标 | N
6060
size | String | medium | 尺寸。可选项：medium/large | N
6161

‎packages/components/badge/__test__/__snapshots__/demo.test.js.snap‎

Lines changed: 58 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ exports[`Badge Badge size demo works fine 1`] = `
152152
<wx-view
153153
class="demo-desc"
154154
>
155-
Middle
155+
Medium
156156
</wx-view>
157157
<wx-view
158158
class="block"
@@ -256,7 +256,24 @@ exports[`Badge Badge theme demo works fine 1`] = `
256256
title="单行标题"
257257
>
258258
<t-badge
259-
count="New"
259+
count="NEW"
260+
offset="{{
261+
Array [
262+
0,
263+
0,
264+
]
265+
}}"
266+
shape="ribbon-left"
267+
slot="note"
268+
/>
269+
</t-cell>
270+
<t-cell
271+
bordered="{{false}}"
272+
tClass="t-class-cell"
273+
title="单行标题"
274+
>
275+
<t-badge
276+
count="NEW"
260277
offset="{{
261278
Array [
262279
0,
@@ -267,5 +284,44 @@ exports[`Badge Badge theme demo works fine 1`] = `
267284
slot="note"
268285
/>
269286
</t-cell>
287+
<wx-view
288+
class="demo-desc"
289+
style="margin-bottom: 32rpx"
290+
>
291+
三角角标
292+
</wx-view>
293+
<t-cell
294+
tClass="t-class-cell"
295+
title="单行标题"
296+
>
297+
<t-badge
298+
count="NEW"
299+
offset="{{
300+
Array [
301+
0,
302+
0,
303+
]
304+
}}"
305+
shape="triangle-left"
306+
slot="note"
307+
/>
308+
</t-cell>
309+
<t-cell
310+
bordered="{{false}}"
311+
tClass="t-class-cell"
312+
title="单行标题"
313+
>
314+
<t-badge
315+
count="NEW"
316+
offset="{{
317+
Array [
318+
0,
319+
0,
320+
]
321+
}}"
322+
shape="triangle-right"
323+
slot="note"
324+
/>
325+
</t-cell>
270326
</theme>
271327
`;

‎packages/components/badge/_example/size/index.wxml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<t-avatar icon="user" size="large" badge-props="{{ {count: 8, size: 'large', offset: [7, 7]} }}" />
55
</view>
66

7-
<view class="demo-desc">Middle</view>
7+
<view class="demo-desc">Medium</view>
88

99
<view class="block">
1010
<t-avatar icon="user" badge-props="{{ {count: 8, offset: [5, 5]} }}" />

‎packages/components/badge/_example/theme/index.wxml‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,5 +28,16 @@
2828

2929
<view class="demo-desc" style="margin-bottom: 32rpx">角标</view>
3030
<t-cell title="单行标题" t-class="t-class-cell">
31-
<t-badge count="New" offset="{{skylineRender ? ['-16rpx', '-56rpx']: [0, 0]}}" shape="ribbon" slot="note" />
31+
<t-badge count="NEW" offset="{{skylineRender ? ['-18rpx', '-32rpx']: [0, 0]}}" shape="ribbon-left" slot="note" />
32+
</t-cell>
33+
<t-cell title="单行标题" bordered="{{false}}" t-class="t-class-cell">
34+
<t-badge count="NEW" offset="{{skylineRender ? ['-18rpx', '-32rpx']: [0, 0]}}" shape="ribbon" slot="note" />
35+
</t-cell>
36+
37+
<view class="demo-desc" style="margin-bottom: 32rpx">三角角标</view>
38+
<t-cell title="单行标题" t-class="t-class-cell">
39+
<t-badge count="NEW" offset="{{skylineRender ? ['-24rpx', '-32rpx']: [0, 0]}}" shape="triangle-left" slot="note" />
40+
</t-cell>
41+
<t-cell title="单行标题" bordered="{{false}}" t-class="t-class-cell">
42+
<t-badge count="NEW" offset="{{skylineRender ? ['-24rpx', '-32rpx']: [0, 0]}}" shape="triangle-right" slot="note" />
3243
</t-cell>

‎packages/components/badge/badge.less‎

Lines changed: 102 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -49,46 +49,87 @@
4949
border-radius: calc(@badge-basic-height / 2);
5050
}
5151

52-
&__ribbon {
52+
&__ribbon,
53+
&__ribbon-right,
54+
&__triangle-right,
55+
&__ribbon-left,
56+
&__triangle-left {
5357
&-outer {
5458
position: absolute;
5559
top: 0;
60+
}
61+
}
62+
63+
&__ribbon,
64+
&__ribbon-right,
65+
&__triangle-right {
66+
&-outer {
5667
right: 0;
5768
}
5869
}
5970

60-
&--ribbon {
61-
position: relative;
62-
display: inline-block;
63-
transform-origin: center center;
64-
transform: translate(calc(50% - @badge-basic-height + 1rpx), calc(-50% + @badge-basic-height - 1rpx)) rotate(45deg);
71+
&__ribbon-left,
72+
&__triangle-left {
73+
&-outer {
74+
left: 0;
75+
}
76+
}
77+
78+
&--bubble {
79+
border-radius: @border-bubble-border-radius;
80+
}
81+
82+
&--ribbon,
83+
&--ribbon-right,
84+
&--ribbon-left,
85+
&--triangle-left,
86+
&--triangle-right {
87+
width: calc(@badge-basic-height * 2);
88+
height: calc(@badge-basic-height * 2);
6589
border-radius: 0;
66-
// padding: 0;
90+
padding: 0;
91+
position: absolute;
92+
top: 0;
93+
display: flex;
94+
align-items: center;
95+
justify-content: center;
96+
overflow: hidden;
97+
}
6798

68-
&::before,
69-
&::after {
70-
content: '';
71-
position: absolute;
72-
width: 0;
73-
height: 0;
74-
bottom: 0;
75-
border-bottom: @badge-basic-height solid @badge-color;
76-
font-size: 0;
77-
}
99+
&--ribbon,
100+
&--ribbon-right {
101+
background: linear-gradient(45deg, transparent 50%, @badge-color 50%, @badge-color 85%, transparent 85%);
102+
}
78103

79-
&::before {
80-
left: calc(-1 * @badge-basic-height + 1rpx);
81-
border-left: @badge-basic-height solid transparent;
82-
}
104+
&--triangle-right {
105+
background: linear-gradient(45deg, transparent 50%, @badge-color 50%);
106+
}
107+
108+
&--ribbon,
109+
&--ribbon-right,
110+
&--triangle-right {
111+
right: 0;
83112

84-
&::after {
85-
right: calc(-1 * @badge-basic-height + 1rpx);
86-
border-right: @badge-basic-height solid transparent;
113+
.@{prefix}-badge__count {
114+
transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2 + 1rpx));
87115
}
88116
}
89117

90-
&--bubble {
91-
border-radius: @border-bubble-border-radius;
118+
&--ribbon-left {
119+
background: linear-gradient(-45deg, transparent 50%, @badge-color 50%, @badge-color 85%, transparent 85%);
120+
}
121+
122+
&--triangle-left {
123+
background: linear-gradient(-45deg, transparent 50%, @badge-color 50%);
124+
}
125+
126+
&--ribbon-left,
127+
&--triangle-left {
128+
left: 0;
129+
130+
.@{prefix}-badge__count {
131+
transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2 + 1rpx));
132+
}
92133
}
93134

94135
// size
@@ -103,17 +144,50 @@
103144
border-radius: calc(@badge-large-height / 2);
104145
}
105146

106-
&__content:not(:empty) + .t-has-count {
147+
&--large&--ribbon,
148+
&--large&--ribbon-right,
149+
&--large&--ribbon-left,
150+
&--large&--triangle-right,
151+
&--large&--triangle-left {
152+
width: calc(@badge-large-height * 2);
153+
height: calc(@badge-large-height * 2);
154+
padding: 0;
155+
}
156+
157+
&--large&--ribbon,
158+
&--large&--ribbon-right,
159+
&--large&--triangle-right {
160+
.@{prefix}-badge__count {
161+
transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 40rpx) / 2 + 3rpx));
162+
}
163+
}
164+
165+
&--large&--ribbon-left,
166+
&--large&--triangle-left {
167+
.@{prefix}-badge__count {
168+
transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 40rpx) / 2 + 3rpx));
169+
}
170+
}
171+
172+
&__content:not(:empty) + &--bubble.@{prefix}-has-count,
173+
&__content:not(:empty) + &--circle.@{prefix}-has-count,
174+
&__content:not(:empty) + &--square.@{prefix}-has-count {
107175
transform-origin: center center;
108176
transform: translate(-50%, -50%);
109177
position: absolute;
110-
left: 100%;
111178
top: 0;
179+
left: 100%;
112180
}
113181

114182
&__content-text {
115183
display: block;
116184
font: @font-body-large;
117185
color: @badge-content-text-color;
118186
}
187+
188+
&__count {
189+
&:empty {
190+
display: none;
191+
}
192+
}
119193
}

‎packages/components/badge/badge.ts‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { SuperComponent, wxComponent } from '../common/src/index';
22
import config from '../common/config';
33
import props from './props';
44
import type { TdBadgeProps } from './type';
5-
import { uniqueFactory } from '../common/utils';
5+
import { uniqueFactory, getRect } from '../common/utils';
66

77
const { prefix } = config;
88
const name = `${prefix}-badge`;
@@ -26,15 +26,34 @@ export default class Badge extends SuperComponent {
2626
value: '',
2727
labelID: '',
2828
descriptionID: '',
29+
useOuterClass: false,
2930
};
3031

3132
lifetimes = {
3233
ready() {
3334
const uniqueID = getUniqueID();
35+
3436
this.setData({
3537
labelID: `${uniqueID}_label`,
3638
descriptionID: `${uniqueID}_description`,
3739
});
40+
41+
this.checkForActualContent();
42+
},
43+
};
44+
45+
methods = {
46+
checkForActualContent() {
47+
const target = ['ribbon', 'ribbon-right', 'ribbon-left', 'triangle-right', 'triangle-left'];
48+
if (this.properties.content || !target.includes(this.properties.shape)) {
49+
this.setData({ useOuterClass: false });
50+
return;
51+
}
52+
53+
return getRect(this, `.${name}__content`).then((rect) => {
54+
const hasSlotContent = rect.width > 0 || rect.height > 0;
55+
this.setData({ useOuterClass: !hasSlotContent });
56+
});
3857
},
3958
};
4059
}

‎packages/components/badge/badge.wxml‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
<view
1111
style="{{_._style([style, customStyle])}}"
12-
class="{{_this.getBadgeOuterClass({classPrefix, shape})}} class {{prefix}}-class"
12+
class="{{classPrefix}} {{ useOuterClass? classPrefix + '__' + shape + '-outer': '' }} class {{prefix}}-class"
1313
aria-labelledby="{{labelID}}"
1414
aria-describedby="{{descriptionID}}"
1515
aria-role="{{ ariaRole || 'option'}}"
@@ -28,9 +28,11 @@
2828
aria-hidden="true"
2929
aria-label="{{ ariaLabel || _.getBadgeAriaLabel({dot, count, maxCount}) }}"
3030
>
31-
<block wx:if="{{_this.isShowBadge({dot,count,showZero})}}">
32-
{{ _this.getBadgeValue({dot, count, maxCount}) }}
33-
</block>
34-
<slot else name="count" />
31+
<view class="{{classPrefix}}__count">
32+
<block wx:if="{{_this.isShowBadge({dot,count,showZero})}}">
33+
{{ _this.getBadgeValue({dot, count, maxCount}) }}
34+
</block>
35+
<slot else name="count" />
36+
</view>
3537
</view>
3638
</view>

‎packages/components/badge/badge.wxs‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,6 @@ var getBadgeStyles = function (props) {
3535
return styleStr;
3636
};
3737

38-
var getBadgeOuterClass = function (props) {
39-
var baseClass = props.classPrefix;
40-
var classNames = [baseClass, props.shape === 'ribbon' ? baseClass + '__ribbon-outer' : ''];
41-
return classNames.join(' ');
42-
};
43-
4438
var getBadgeInnerClass = function (props) {
4539
var baseClass = props.classPrefix;
4640
var classNames = [
@@ -66,6 +60,5 @@ var isShowBadge = function (props) {
6660

6761
module.exports.getBadgeValue = getBadgeValue;
6862
module.exports.getBadgeStyles = getBadgeStyles;
69-
module.exports.getBadgeOuterClass = getBadgeOuterClass;
7063
module.exports.getBadgeInnerClass = getBadgeInnerClass;
7164
module.exports.isShowBadge = isShowBadge;

‎packages/components/badge/props.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const props: TdBadgeProps = {
3535
offset: {
3636
type: Array,
3737
},
38-
/** 形状 */
38+
/** 徽标形状，其中 ribbon 和 ribbon-right 等效 */
3939
shape: {
4040
type: String,
4141
value: 'circle',

0 commit comments

Comments
 (0)