diff --git a/components/collapse/demo/custom.ts b/components/collapse/demo/custom.ts index 0a1bf19f60d..c9e06323d2c 100644 --- a/components/collapse/demo/custom.ts +++ b/components/collapse/demo/custom.ts @@ -5,13 +5,16 @@ import { Component } from '@angular/core'; template: ` + [ngStyle]="panel.customStyle" [nzExpandedIcon]="!isFirst && (panel.icon || expandedIcon)" [nzExtra]="isFirst && extraTpl">

{{panel.name}} content

{{ active }}
+ + +
`, styles : [] diff --git a/components/collapse/doc/index.en-US.md b/components/collapse/doc/index.en-US.md index bb283458bd5..1c3f6069914 100755 --- a/components/collapse/doc/index.en-US.md +++ b/components/collapse/doc/index.en-US.md @@ -31,3 +31,4 @@ A content area which can be collapsed and expanded. | `[nzActive]` | Active status of panel, double binding | `boolean` | - | | `(nzActiveChange)` | Callback function of the active status | `EventEmitter` | - | | `[nzExpandedIcon]` | Customize an icon for toggle | `string|TemplateRef` | - | +| `[nzExtra]` | Extra element in the corner | `string|TemplateRef` | - | diff --git a/components/collapse/doc/index.zh-CN.md b/components/collapse/doc/index.zh-CN.md index 5c4e9e56d59..ca2a90d0012 100755 --- a/components/collapse/doc/index.zh-CN.md +++ b/components/collapse/doc/index.zh-CN.md @@ -31,4 +31,5 @@ cols: 1 | `[nzShowArrow]` | 是否展示箭头 | `boolean` | `true` | | `[nzActive]` | 面板是否展开,可双向绑定 | `boolean` | - | | `(nzActiveChange)` | 面板展开回调 | `EventEmitter` | - | -| `[nzExpandedIcon]` | 自定义切换图标 | `string|TemplateRef` | - | \ No newline at end of file +| `[nzExpandedIcon]` | 自定义切换图标 | `string|TemplateRef` | - | +| `[nzExtra]` | 自定义渲染每个面板右上角的内容 | `string|TemplateRef` | - | \ No newline at end of file diff --git a/components/collapse/nz-collapse-panel.component.html b/components/collapse/nz-collapse-panel.component.html index 5409cd1f3b4..ba5c4b8d4b7 100644 --- a/components/collapse/nz-collapse-panel.component.html +++ b/components/collapse/nz-collapse-panel.component.html @@ -5,6 +5,9 @@ {{ nzHeader }} +
+ {{ nzExtra }} +
; @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 {