Skip to content

Commit f40dd38

Browse files
buqiyuanbuqiyuan
authored
feat(module:badge): support size (#7405)
1 parent 1e9c11e commit f40dd38

13 files changed

Lines changed: 156 additions & 15 deletions

‎components/badge/badge-sup.component.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
} from '@angular/core';
1616

1717
import { zoomBadgeMotion } from 'ng-zorro-antd/core/animation';
18-
import { NzSafeAny } from 'ng-zorro-antd/core/types';
18+
import { NzSafeAny, NzSizeDSType } from 'ng-zorro-antd/core/types';
1919

2020
@Component({
2121
selector: 'nz-badge-sup',
@@ -54,6 +54,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
5454
'[style.right.px]': `nzOffset && nzOffset[0] ? -nzOffset[0] : null`,
5555
'[style.margin-top.px]': `nzOffset && nzOffset[1] ? nzOffset[1] : null`,
5656
'[class.ant-badge-count]': `!nzDot`,
57+
'[class.ant-badge-count-sm]': `nzSize === 'small'`,
5758
'[class.ant-badge-dot]': `nzDot`,
5859
'[class.ant-badge-multiple-words]': `countArray.length >= 2`
5960
}
@@ -67,6 +68,7 @@ export class NzBadgeSupComponent implements OnInit, OnChanges {
6768
@Input() disableAnimation = false;
6869
@Input() nzCount?: number | TemplateRef<NzSafeAny>;
6970
@Input() noAnimation = false;
71+
@Input() nzSize: NzSizeDSType = 'default';
7072
maxNumberArray: string[] = [];
7173
countArray: number[] = [];
7274
count: number = 0;

‎components/badge/badge.component.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { takeUntil } from 'rxjs/operators';
2626
import { zoomBadgeMotion } from 'ng-zorro-antd/core/animation';
2727
import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
2828
import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
29-
import { BooleanInput, NzSafeAny } from 'ng-zorro-antd/core/types';
29+
import { BooleanInput, NzSafeAny, NzSizeDSType } from 'ng-zorro-antd/core/types';
3030
import { InputBoolean } from 'ng-zorro-antd/core/util';
3131

3232
import { badgePresetColors } from './preset-colors';
@@ -57,6 +57,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'badge';
5757
<nz-badge-sup
5858
*ngIf="showSup"
5959
[nzOffset]="nzOffset"
60+
[nzSize]="nzSize"
6061
[nzTitle]="nzTitle"
6162
[nzStyle]="nzStyle"
6263
[nzDot]="nzDot"
@@ -95,6 +96,7 @@ export class NzBadgeComponent implements OnChanges, OnDestroy, OnInit {
9596
@Input() nzStatus?: NzBadgeStatusType | string;
9697
@Input() nzCount?: number | TemplateRef<NzSafeAny>;
9798
@Input() nzOffset?: [number, number];
99+
@Input() nzSize: NzSizeDSType = 'default';
98100

99101
constructor(
100102
public nzConfigService: NzConfigService,

‎components/badge/badge.spec.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { By } from '@angular/platform-browser';
55
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
66

77
import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
8-
import { NgStyleInterface } from 'ng-zorro-antd/core/types';
8+
import { NgStyleInterface, NzSizeDSType } from 'ng-zorro-antd/core/types';
99

1010
import { NzBadgeComponent } from './badge.component';
1111
import { NzBadgeModule } from './badge.module';
@@ -155,6 +155,14 @@ describe('badge', () => {
155155
fixture.detectChanges();
156156
expect(badgeElement.nativeElement.querySelector('.ant-badge-status-text').innerText).toBe('test');
157157
});
158+
159+
it('should size work', () => {
160+
fixture.detectChanges();
161+
expect(badgeElement.nativeElement.querySelector('nz-badge-sup').classList).toContain('ant-badge-count');
162+
testComponent.size = 'small';
163+
fixture.detectChanges();
164+
expect(badgeElement.nativeElement.querySelector('nz-badge-sup').classList).toContain('ant-badge-count-sm');
165+
});
158166
});
159167

160168
describe('RTL', () => {
@@ -194,6 +202,7 @@ describe('badge', () => {
194202
[nzOffset]="offset"
195203
[nzTitle]="title"
196204
[nzStandalone]="!inner"
205+
[nzSize]="size"
197206
>
198207
<a *ngIf="inner"></a>
199208
</nz-badge>
@@ -210,6 +219,7 @@ export class NzTestBadgeBasicComponent {
210219
text!: string;
211220
title?: string | null;
212221
offset?: [number, number];
222+
size?: NzSizeDSType = 'default';
213223
noAnimation = true;
214224
}
215225

‎components/badge/demo/module‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
33
import { NzSwitchModule } from 'ng-zorro-antd/switch';
44
import { NzIconModule } from 'ng-zorro-antd/icon';
55
import { NzCardModule } from 'ng-zorro-antd/card';
6+
import { NzSpaceModule } from 'ng-zorro-antd/space';
67

7-
export const moduleList = [ NzBadgeModule, NzButtonModule, NzSwitchModule, NzIconModule, NzCardModule ];
8+
export const moduleList = [NzBadgeModule, NzButtonModule, NzSwitchModule, NzIconModule, NzCardModule, NzSpaceModule];

‎components/badge/demo/no-wrapper.ts‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,22 @@ import { Component } from '@angular/core';
33
@Component({
44
selector: 'nz-demo-badge-no-wrapper',
55
template: `
6-
<nz-badge nzStandalone [nzCount]="25"></nz-badge>
7-
<nz-badge
8-
nzStandalone
9-
[nzCount]="4"
10-
[nzStyle]="{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }"
11-
></nz-badge>
12-
<nz-badge nzStandalone [nzCount]="109" [nzStyle]="{ backgroundColor: '#52c41a' }"></nz-badge>
6+
<nz-space>
7+
<nz-switch [(ngModel)]="show"></nz-switch>
8+
<nz-badge nzStandalone [nzCount]="show ? 25 : 0"></nz-badge>
9+
<nz-badge
10+
nzStandalone
11+
[nzCount]="show ? 4 : 0"
12+
[nzStyle]="{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }"
13+
></nz-badge>
14+
<nz-badge [nzCount]="show ? iconTemplate : 0" nzStandalone>
15+
<a class="head-example"></a>
16+
</nz-badge>
17+
<ng-template #iconTemplate>
18+
<i nz-icon nzType="clock-circle" class="ant-scroll-number-custom-component" style="color: #f5222d"></i>
19+
</ng-template>
20+
<nz-badge nzStandalone [nzCount]="show ? 109 : 0" [nzStyle]="{ backgroundColor: '#52c41a' }"></nz-badge>
21+
</nz-space>
1322
`,
1423
styles: [
1524
`
@@ -19,4 +28,6 @@ import { Component } from '@angular/core';
1928
`
2029
]
2130
})
22-
export class NzDemoBadgeNoWrapperComponent {}
31+
export class NzDemoBadgeNoWrapperComponent {
32+
show = true;
33+
}

‎components/badge/demo/offset.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 6
3+
title:
4+
zh-CN: 自定义位置偏移
5+
en-US: Offset
6+
---
7+
8+
## zh-CN
9+
10+
设置状态点的位置偏移，格式为 `[left, top]`，表示状态点距默认位置左侧、上方的偏移量。
11+
12+
## en-US
13+
14+
Set offset of the badge dot, the format is `[left, top]`, which represents the offset of the status dot from the left and top of the default position.

‎components/badge/demo/offset.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-badge-offset',
5+
template: `
6+
<a>
7+
<nz-badge [nzCount]="5" [nzOffset]="[10, 10]">
8+
<a class="head-example"></a>
9+
</nz-badge>
10+
</a>
11+
`,
12+
styles: [
13+
`
14+
.head-example {
15+
width: 42px;
16+
height: 42px;
17+
border-radius: 4px;
18+
background: #eee;
19+
display: inline-block;
20+
vertical-align: middle;
21+
}
22+
`
23+
]
24+
})
25+
export class NzDemoBadgeOffsetComponent {}

‎components/badge/demo/ribbon.ts‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,36 @@ import { Component } from '@angular/core';
33
@Component({
44
selector: 'nz-demo-badge-ribbon',
55
template: `
6-
<nz-ribbon nzText="Pushes open the window">
7-
<nz-card>And raises the spyglass.</nz-card>
6+
<nz-ribbon nzText="Hippies">
7+
<nz-card nzTitle="Pushes open the window" nzSize="small"> And raises the spyglass. </nz-card>
8+
</nz-ribbon>
9+
<br />
10+
<nz-ribbon nzText="Hippies" nzColor="pink">
11+
<nz-card nzTitle="Pushes open the window" nzSize="small"> And raises the spyglass. </nz-card>
12+
</nz-ribbon>
13+
<br />
14+
<nz-ribbon nzText="Hippies" nzColor="red">
15+
<nz-card nzTitle="Pushes open the window" nzSize="small"> And raises the spyglass. </nz-card>
16+
</nz-ribbon>
17+
<br />
18+
<nz-ribbon nzText="Hippies" nzColor="cyan">
19+
<nz-card nzTitle="Pushes open the window" nzSize="small"> And raises the spyglass. </nz-card>
20+
</nz-ribbon>
21+
<br />
22+
<nz-ribbon nzText="Hippies" nzColor="green">
23+
<nz-card nzTitle="Pushes open the window" nzSize="small"> And raises the spyglass. </nz-card>
24+
</nz-ribbon>
25+
<br />
26+
<nz-ribbon nzText="Hippies" nzColor="purple">
27+
<nz-card nzTitle="Pushes open the window" nzSize="small"> And raises the spyglass. </nz-card>
28+
</nz-ribbon>
29+
<br />
30+
<nz-ribbon nzText="Hippies" nzColor="volcano">
31+
<nz-card nzTitle="Pushes open the window" nzSize="small"> And raises the spyglass. </nz-card>
32+
</nz-ribbon>
33+
<br />
34+
<nz-ribbon nzText="Hippies" nzColor="magenta">
35+
<nz-card nzTitle="Pushes open the window" nzSize="small"> And raises the spyglass. </nz-card>
836
</nz-ribbon>
937
`
1038
})

‎components/badge/demo/size.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 7
3+
title:
4+
zh-CN: 大小
5+
en-US: Size
6+
---
7+
8+
## zh-CN
9+
10+
可以设置有数字徽标的大小。
11+
12+
## en-US
13+
14+
Set size of numeral Badge.

‎components/badge/demo/size.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-badge-size',
5+
template: `
6+
<nz-badge nzSize="default" [nzCount]="5">
7+
<a class="head-example"></a>
8+
</nz-badge>
9+
<nz-badge nzSize="small" [nzCount]="5">
10+
<a class="head-example"></a>
11+
</nz-badge>
12+
`,
13+
styles: [
14+
`
15+
nz-badge {
16+
margin-right: 20px;
17+
}
18+
19+
.head-example {
20+
width: 42px;
21+
height: 42px;
22+
border-radius: 4px;
23+
background: #eee;
24+
display: inline-block;
25+
vertical-align: middle;
26+
}
27+
`
28+
]
29+
})
30+
export class NzDemoBadgeSizeComponent {}

0 commit comments

Comments
 (0)