;
@Input() nzExpandedIcon: string | TemplateRef
;
+ @Input() nzExtra: string | TemplateRef;
@Output() readonly nzActiveChange = new EventEmitter();
clickHeader(): void {
diff --git a/components/collapse/nz-collapse.spec.ts b/components/collapse/nz-collapse.spec.ts
index 469b38ed6ea..124edbd8d8d 100644
--- a/components/collapse/nz-collapse.spec.ts
+++ b/components/collapse/nz-collapse.spec.ts
@@ -39,6 +39,14 @@ describe('collapse', () => {
fixture.detectChanges();
expect(collapse.nativeElement.firstElementChild.classList).toContain('ant-collapse-borderless');
});
+ it('should extra work', () => {
+ expect(collapse.nativeElement.querySelector('.ant-collapse-extra')).toBeNull();
+ testComponent.showExtra = 'extra';
+ fixture.detectChanges();
+ const extra = collapse.nativeElement.querySelector('.ant-collapse-extra');
+ expect(extra).toBeDefined();
+ expect(extra.innerText).toBe('extra');
+ });
it('should showArrow work', () => {
fixture.detectChanges();
expect(panels[ 0 ].nativeElement.querySelector('.ant-collapse-arrow').firstElementChild).toBeDefined();
@@ -168,7 +176,7 @@ describe('collapse', () => {
template: `
template
-
+
Panel01
@@ -185,6 +193,7 @@ export class NzTestCollapseBasicComponent {
active01 = false;
active02 = false;
showArrow = true;
+ showExtra = '';
header = 'string';
active01Change = jasmine.createSpy('active01 callback');
active02Change = jasmine.createSpy('active02 callback');
diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less
index e9d6fbee9e1..a0f008e8ef8 100644
--- a/components/collapse/style/index.less
+++ b/components/collapse/style/index.less
@@ -22,6 +22,8 @@
> .@{collapse-prefix-cls}-header {
position: relative;
+ display: flex;
+ align-items: center;
padding: @collapse-header-padding;
color: @heading-color;
line-height: 22px;
@@ -47,6 +49,10 @@
&:focus {
outline: none;
}
+
+ .@{collapse-prefix-cls}-extra {
+ margin: 0 16px 0 auto;
+ }
}
&.@{collapse-prefix-cls}-no-arrow {