Skip to content

Commit

Permalink
fix(module:tabs): tabs add btn disappear after all tab closed (#7076)
Browse files Browse the repository at this point in the history
* fix: fix Tabs  adding & closable  error

There is a problem with the tabs component. When opening and closing the tab page and the Add button, if all the open tab pages are closed, the Add button will not be found. This problem can be repeated in the official website document demo.

Tabs组件有一个问题,当开启关闭tab页和添加按钮时,如果把开启的tab页全部关掉,添加按钮也找不到了,这个问题在官网文档demo中即可复现。

https://ng.ant.design/components/tabs/en#components-tabs-demo-card-top

* fix(module:tabs): tabs add btn disappear after all tab closed

1.Move the add btn height css to patch.less from index.less
2.Add the btn shown test

close #7077
  • Loading branch information
ziqiangai authored Nov 25, 2021
1 parent b8cc94f commit 3709b73
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 2 deletions.
7 changes: 7 additions & 0 deletions components/tabs/style/patch.less
Original file line number Diff line number Diff line change
Expand Up @@ -89,4 +89,11 @@ nz-tabs-nav {
pointer-events: none;
color: @disabled-color;
}
> .@{tab-prefix-cls}-nav,
> div > .@{tab-prefix-cls}-nav {

.@{tab-prefix-cls}-nav-add {
min-height: @tabs-card-height;
}
}
}
17 changes: 16 additions & 1 deletion components/tabs/tabset.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -586,6 +586,17 @@ describe('NzTabSet', () => {

expect(fixture.componentInstance.handleSelection).not.toHaveBeenCalled();
}));

it('should show add btn after all tabs are removed', () => {
const component = fixture.debugElement.componentInstance;
component.closable = true;
component.type = 'editable-card';
fixture.detectChanges();
fixture.componentInstance.tabs.splice(0, component.tabs.length);
fixture.detectChanges();
const btnCount = fixture.debugElement.queryAll(By.css('.ant-tabs-nav-add')).length;
expect(btnCount).toBeGreaterThan(0);
});
});

describe('async tabs', () => {
Expand Down Expand Up @@ -987,7 +998,11 @@ class DisableTabsTestComponent {

@Component({
template: `
<nz-tabset [(nzSelectedIndex)]="selectedIndex" (nzSelectedIndexChange)="handleSelection($event)">
<nz-tabset
[(nzSelectedIndex)]="selectedIndex"
[nzType]="'editable-card'"
(nzSelectedIndexChange)="handleSelection($event)"
>
<nz-tab *ngFor="let tab of tabs" [nzTitle]="tab.title">
{{ tab.content }}
</nz-tab>
Expand Down
2 changes: 1 addition & 1 deletion components/tabs/tabset.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ let nextId = 0;
],
template: `
<nz-tabs-nav
*ngIf="tabs.length"
*ngIf="tabs.length || addable"
[ngStyle]="nzTabBarStyle"
[selectedIndex]="nzSelectedIndex || 0"
[inkBarAnimated]="inkBarAnimated"
Expand Down

0 comments on commit 3709b73

Please sign in to comment.