Skip to content

Commit 4ed2b5e

Browse files
anlyyaoanlyyao
committed
feat(Badge): the shape attr add four optional values
1 parent 5513c0f commit 4ed2b5e

File tree

8 files changed

+134
-25
lines changed

8 files changed

+134
-25
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/badge.less‎

Lines changed: 92 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,21 +49,39 @@
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 {
71+
&__ribbon-left,
72+
&__triangle-left {
73+
&-outer {
74+
left: 0;
75+
}
76+
}
77+
78+
&--ribbon,
79+
&--ribbon-right,
80+
&--ribbon-left {
6181
position: relative;
6282
display: inline-block;
6383
transform-origin: center center;
64-
transform: translate(calc(50% - @badge-basic-height + 1rpx), calc(-50% + @badge-basic-height - 1rpx)) rotate(45deg);
6584
border-radius: 0;
66-
// padding: 0;
6785

6886
&::before,
6987
&::after {
@@ -87,10 +105,51 @@
87105
}
88106
}
89107

108+
&--ribbon,
109+
&--ribbon-right {
110+
transform: translate(calc(50% - @badge-basic-height + 1rpx), calc(-50% + @badge-basic-height - 1rpx)) rotate(45deg);
111+
}
112+
113+
&--ribbon-left {
114+
transform: translate(calc(-50% + @badge-basic-height - 1rpx), calc(-50% + @badge-basic-height - 1rpx))
115+
rotate(-45deg);
116+
}
117+
90118
&--bubble {
91119
border-radius: @border-bubble-border-radius;
92120
}
93121

122+
&--triangle-left,
123+
&--triangle-right {
124+
width: calc(@badge-basic-height * 2);
125+
height: calc(@badge-basic-height * 2);
126+
padding: 0;
127+
position: absolute;
128+
top: 0;
129+
display: flex;
130+
align-items: center;
131+
justify-content: center;
132+
overflow: hidden;
133+
}
134+
135+
&--triangle-right {
136+
background: linear-gradient(45deg, transparent 50%, @badge-color 50%);
137+
right: 0;
138+
139+
.@{prefix}-badge__count {
140+
transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2));
141+
}
142+
}
143+
144+
&--triangle-left {
145+
background: linear-gradient(-45deg, transparent 50%, @badge-color 50%);
146+
left: 0;
147+
148+
.@{prefix}-badge__count {
149+
transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2));
150+
}
151+
}
152+
94153
// size
95154
&--large {
96155
font: @badge-large-font;
@@ -103,17 +162,44 @@
103162
border-radius: calc(@badge-large-height / 2);
104163
}
105164

106-
&__content:not(:empty) + .t-has-count {
165+
&--large&--triangle-right,
166+
&--large&--triangle-left {
167+
width: calc(@badge-large-height * 2);
168+
height: calc(@badge-large-height * 2);
169+
}
170+
171+
&__content:not(:empty) + &--ribbon.@{prefix}-has-count,
172+
&__content:not(:empty) + &--ribbon-right.@{prefix}-has-count,
173+
&__content:not(:empty) + &--ribbon-left.@{prefix}-has-count,
174+
&__content:not(:empty) + &--bubble.@{prefix}-has-count,
175+
&__content:not(:empty) + &--circle.@{prefix}-has-count,
176+
&__content:not(:empty) + &--square.@{prefix}-has-count {
107177
transform-origin: center center;
108178
transform: translate(-50%, -50%);
109179
position: absolute;
110-
left: 100%;
111180
top: 0;
112181
}
113182

183+
&__content:not(:empty) + &--ribbon.@{prefix}-has-count,
184+
&__content:not(:empty) + &--ribbon-right.@{prefix}-has-count,
185+
&__content:not(:empty) + &--bubble.@{prefix}-has-count,
186+
&__content:not(:empty) + &--circle.@{prefix}-has-count,
187+
&__content:not(:empty) + &--square.@{prefix}-has-count {
188+
left: 100%;
189+
}
190+
191+
&__content:not(:empty) + &--ribbon-left.@{prefix}-has-count {
192+
right: 100%;
193+
}
194+
114195
&__content-text {
115196
display: block;
116197
font: @font-body-large;
117198
color: @badge-content-text-color;
118199
}
200+
201+
&__count {
202+
display: inline-block;
203+
font: @font-mark-extraSmall;
204+
}
119205
}

‎packages/components/badge/badge.ts‎

Lines changed: 21 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,35 @@ export default class Badge extends SuperComponent {
2626
value: '',
2727
labelID: '',
2828
descriptionID: '',
29+
hasActualContent: false,
2930
};
3031

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

‎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}} {{ !hasActualContent? 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',

‎packages/components/badge/type.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,20 @@ export interface TdBadgeProps {
5353
value?: Array<string | number>;
5454
};
5555
/**
56-
* 形状
56+
* 徽标形状，其中 ribbon 和 ribbon-right 等价
5757
* @default circle
5858
*/
5959
shape?: {
6060
type: StringConstructor;
61-
value?: 'circle' | 'square' | 'bubble' | 'ribbon';
61+
value?:
62+
| 'circle'
63+
| 'square'
64+
| 'bubble'
65+
| 'ribbon'
66+
| 'ribbon-right'
67+
| 'ribbon-left'
68+
| 'triangle-right'
69+
| 'triangle-left';
6270
};
6371
/**
6472
* 当数值为 0 时，是否展示徽标

0 commit comments

Comments
 (0)