Skip to content

Commit 69dd31a

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:tab): support standalone component (#8213)
1 parent a2858d3 commit 69dd31a

15 files changed

Lines changed: 170 additions & 137 deletions

‎components/tabs/doc/index.en-US.md‎

Lines changed: 50 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -22,59 +22,59 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs';
2222

2323
## API
2424

25-
### nz-tabset
26-
27-
| Property | Description | Type | Default | Global Config |
28-
| -------- | ----------- | ---- | ------- | ------------- |
29-
| `[nzSelectedIndex]` | Current tab's index | `number` | - |
30-
| `[nzAnimated]` | Whether to change tabs with animation. Only works while `nzTabPosition="top" \| "bottom"` | `boolean \| {inkBar:boolean, tabPane:boolean}` | `true`, `false` when `type="card"` | ✅ |
31-
| `[nzSize]` | preset tab bar size | `'large' \| 'small' \| 'default'` | `'default'` | ✅ |
32-
| `[nzTabBarExtraContent]` | Extra content in tab bar | `TemplateRef<void>` | - |
33-
| `[nzTabBarStyle]` | Tab bar style object | `object` | - |
34-
| `[nzTabPosition]` | Position of tabs | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | |
35-
| `[nzType]` | Basic style of tabs | `'line' \| 'card' \| 'editable-card'` | `'line'` | ✅ |
36-
| `[nzTabBarGutter]` | The gap between tabs | `number` | - | ✅ |
37-
| `[nzHideAll]` | Whether hide all tabs | `boolean` | `false` |
38-
| `[nzLinkRouter]` | Link with Angular router. It supports child mode and query param mode | `boolean` | `false` ||
39-
| `[nzLinkExact]` | Use exact routing matching | `boolean` | `true` |
40-
| `[nzCanDeactivate]` | Determine if a tab can be deactivated | `NzTabsCanDeactivateFn` | - |
41-
| `[nzCentered]` | Centers tabs | `boolean` | `false` |
42-
| `(nzSelectedIndexChange)` | Current tab's index change callback | `EventEmitter<number>` | - |
43-
| `(nzSelectChange)` | Current tab's change callback | `EventEmitter<{index: number,tab: NzTabComponent}>` | - |
44-
45-
### nz-tabset[nzType="editable-card"]
46-
47-
| Property | Description | Type | Default | Global Config |
48-
| --- | --- | --- | --- | --- |
49-
| `[nzHideAdd]` | Hide plus icon or not | `boolean` | `false` |
50-
| `[nzAddIcon]` | Add icon | `string \| TemplateRef<void>` | - |
51-
| `(nzAdd)` | When add button clicked emit | `EventEmitter<>` | - |
52-
| `(nzClose)` | When close button clicked emit | `EventEmitter<{ index: number }>` | - |
53-
54-
### nz-tab
55-
56-
| Property | Description | Type | Default |
57-
| -------- | ----------- | ---- | ------- |
58-
| `[nzTitle]` | Show text in tab's head | `string \| TemplateRef<void>` | - |
59-
| `[nzForceRender]` | Forced render of content in tabs, not lazy render after clicking on tabs | `boolean` | `false` |
60-
| `[nzDisabled]` | tab disable | `boolean` | - |
61-
| `(nzClick)` | title click callback | `EventEmitter<void>` | - |
62-
| `(nzContextmenu)` | title contextmenu callback | `EventEmitter<MouseEvent>` | - |
63-
| `(nzSelect)` | title select callback | `EventEmitter<void>` | - |
64-
| `(nzDeselect)` | title deselect callback | `EventEmitter<void>` | - |
65-
66-
### nz-tabset[nzType="editable-card"] > nz-tab
67-
| Property | Description | Type | Default | Global Config |
68-
| --- | --- | --- | --- | --- |
69-
| `[nzClosable]` | Show close icon or not | `boolean` | `false` |
70-
| `[nzCloseIcon]` | Close icon | `string \| TemplateRef<void>` | - |
71-
25+
### nz-tabset:standalone
26+
27+
| Property | Description | Type | Default | Global Config |
28+
| ------------------------- | ----------------------------------------------------------------------------------------- | --------------------------------------------------- | ---------------------------------- | ------------- |
29+
| `[nzSelectedIndex]` | Current tab's index | `number` | - |
30+
| `[nzAnimated]` | Whether to change tabs with animation. Only works while `nzTabPosition="top" \| "bottom"` | `boolean \| {inkBar:boolean, tabPane:boolean}` | `true`, `false` when `type="card"` | ✅ |
31+
| `[nzSize]` | preset tab bar size | `'large' \| 'small' \| 'default'` | `'default'` | ✅ |
32+
| `[nzTabBarExtraContent]` | Extra content in tab bar | `TemplateRef<void>` | - |
33+
| `[nzTabBarStyle]` | Tab bar style object | `object` | - |
34+
| `[nzTabPosition]` | Position of tabs | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | |
35+
| `[nzType]` | Basic style of tabs | `'line' \| 'card' \| 'editable-card'` | `'line'` | ✅ |
36+
| `[nzTabBarGutter]` | The gap between tabs | `number` | - | ✅ |
37+
| `[nzHideAll]` | Whether hide all tabs | `boolean` | `false` |
38+
| `[nzLinkRouter]` | Link with Angular router. It supports child mode and query param mode | `boolean` | `false` | |
39+
| `[nzLinkExact]` | Use exact routing matching | `boolean` | `true` |
40+
| `[nzCanDeactivate]` | Determine if a tab can be deactivated | `NzTabsCanDeactivateFn` | - |
41+
| `[nzCentered]` | Centers tabs | `boolean` | `false` |
42+
| `(nzSelectedIndexChange)` | Current tab's index change callback | `EventEmitter<number>` | - |
43+
| `(nzSelectChange)` | Current tab's change callback | `EventEmitter<{index: number,tab: NzTabComponent}>` | - |
44+
45+
### nz-tabset[nzType="editable-card"]:standalone
46+
47+
| Property | Description | Type | Default | Global Config |
48+
| ------------- | ------------------------------ | --------------------------------- | ------- | ------------- |
49+
| `[nzHideAdd]` | Hide plus icon or not | `boolean` | `false` |
50+
| `[nzAddIcon]` | Add icon | `string \| TemplateRef<void>` | - |
51+
| `(nzAdd)` | When add button clicked emit | `EventEmitter<>` | - |
52+
| `(nzClose)` | When close button clicked emit | `EventEmitter<{ index: number }>` | - |
53+
54+
### nz-tab:standalone
55+
56+
| Property | Description | Type | Default |
57+
| ----------------- | ------------------------------------------------------------------------ | ----------------------------- | ------- |
58+
| `[nzTitle]` | Show text in tab's head | `string \| TemplateRef<void>` | - |
59+
| `[nzForceRender]` | Forced render of content in tabs, not lazy render after clicking on tabs | `boolean` | `false` |
60+
| `[nzDisabled]` | tab disable | `boolean` | - |
61+
| `(nzClick)` | title click callback | `EventEmitter<void>` | - |
62+
| `(nzContextmenu)` | title contextmenu callback | `EventEmitter<MouseEvent>` | - |
63+
| `(nzSelect)` | title select callback | `EventEmitter<void>` | - |
64+
| `(nzDeselect)` | title deselect callback | `EventEmitter<void>` | - |
65+
66+
### nz-tabset[nzType="editable-card"] > nz-tab:standalone
67+
68+
| Property | Description | Type | Default | Global Config |
69+
| --------------- | ---------------------- | ----------------------------- | ------- | ------------- |
70+
| `[nzClosable]` | Show close icon or not | `boolean` | `false` |
71+
| `[nzCloseIcon]` | Close icon | `string \| TemplateRef<void>` | - |
7272

7373
#### Template variable references of `nz-tab[nzTitle]`
7474

75-
| Property | Description | Type |
76-
| --- | --- | --- |
77-
| `visible` | Is the title in the visible area, will be rendered to the dropdown menu if `false`. | `boolean`|
75+
| Property | Description | Type |
76+
| --------- | ----------------------------------------------------------------------------------- | --------- |
77+
| `visible` | Is the title in the visible area, will be rendered to the dropdown menu if `false`. | `boolean` |
7878

7979
Use in `nz-tab[nzTitle]`
8080

@@ -93,7 +93,6 @@ Use in `*nzTabLink`
9393
</nz-tab>
9494
```
9595

96-
9796
### [nz-tab]
9897

9998
Tab contents can be lazy loaded by declaring the body in a `ng-template` with the `[nz-tab]` attribute.

‎components/tabs/doc/index.zh-CN.md‎

Lines changed: 51 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -25,62 +25,62 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs';
2525

2626
## API
2727

28-
### nz-tabset
29-
30-
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
31-
| --- | --- | --- | --- | --- |
32-
| `[nzSelectedIndex]` | 当前激活 tab 面板的 序列号，可双向绑定 | `number` | - |
33-
| `[nzAnimated]` | 是否使用动画切换 Tabs，在 `nzTabPosition="top" \| "bottom"` 时有效 | `boolean \| {inkBar:boolean, tabPane:boolean}` | `true`, 当 `type="card"` 时为 `false` | ✅ |
34-
| `[nzSize]` | 大小，提供 `large` `default` 和 `small` 三种大小 | `'large' \| 'small' \| 'default'` | `'default'` | ✅ |
35-
| `[nzTabBarExtraContent]` | tab bar 上额外的元素 | `TemplateRef<void>` | - |
36-
| `[nzTabBarStyle]` | tab bar 的样式对象 | `object` | - |
37-
| `[nzTabPosition]` | 页签位置，可选值有 `top` `right` `bottom` `left` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | |
38-
| `[nzType]` | 页签的基本样式 | `'line' \| 'card' \| 'editable-card'` | `'line'` | ✅ |
39-
| `[nzTabBarGutter]` | tabs 之间的间隙 | `number` | - | ✅ |
40-
| `[nzHideAll]` | 是否隐藏所有tab内容 | `boolean` | `false` |
41-
| `[nzLinkRouter]` | 与 Angular 路由联动 | `boolean` | `false` ||
42-
| `[nzLinkExact]` | 以严格匹配模式确定联动的路由 | `boolean` | `true` |
43-
| `[nzCanDeactivate]` | 决定一个 tab 是否可以被切换 | `NzTabsCanDeactivateFn` | - |
44-
| `[nzCentered]` | 标签居中展示 | `boolean` | `false` |
45-
| `(nzSelectedIndexChange)` | 当前激活 tab 面板的 序列号变更回调函数 | `EventEmitter<number>` | - |
46-
| `(nzSelectChange)` | 当前激活 tab 面板变更回调函数 | `EventEmitter<{index: number,tab: NzTabComponent}>` | - |
47-
48-
### nz-tabset[nzType="editable-card"]
49-
50-
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
51-
| --- | --- | --- | --- | --- |
52-
| `[nzHideAdd]` | 隐藏添加按钮 | `boolean` | `false` |
53-
| `[nzAddIcon]` | 添加按钮图标 | `string \| TemplateRef<void>` | - |
54-
| `(nzAdd)` | 点击添加按钮时的事件 | `EventEmitter<>` | - |
55-
| `(nzClose)` | 点击删除按钮时的事件 | `EventEmitter<{ index: number }>` | - |
56-
57-
58-
### nz-tab
59-
60-
| 参数 | 说明 | 类型 | 默认值 |
61-
| --- | --- | --- | --- |
62-
| `[nzTitle]` | 选项卡头显示文字 | `string \| TemplateRef<TabTemplateContext>` | - |
63-
| `[nzForceRender]` | 被隐藏时是否渲染 DOM 结构 | `boolean` | `false` |
64-
| `[nzDisabled]` | 是否禁用 | `boolean` | - |
65-
| `(nzClick)` | 单击 title 的回调函数 | `EventEmitter<void>` | - |
66-
| `(nzContextmenu)` | 右键 title 的回调函数 | `EventEmitter<MouseEvent>` | - |
67-
| `(nzSelect)` | tab 被选中的回调函数 | `EventEmitter<void>` | - |
68-
| `(nzDeselect)` | tab 被取消选中的回调函数 | `EventEmitter<void>` | - |
69-
70-
### nz-tabset[nzType="editable-card"] > nz-tab
71-
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
72-
| --- | --- | --- | --- | --- |
73-
| `[nzClosable]` | 显示删除按钮 | `boolean` | `false` |
74-
| `[nzCloseIcon]` | 关闭按钮图标 | `string \| TemplateRef<void>` | - |
75-
28+
### nz-tabset:standalone
29+
30+
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
31+
| ------------------------- | ------------------------------------------------------------------ | --------------------------------------------------- | ------------------------------------- | -------- |
32+
| `[nzSelectedIndex]` | 当前激活 tab 面板的 序列号，可双向绑定 | `number` | - |
33+
| `[nzAnimated]` | 是否使用动画切换 Tabs，在 `nzTabPosition="top" \| "bottom"` 时有效 | `boolean \| {inkBar:boolean, tabPane:boolean}` | `true`, 当 `type="card"` 时为 `false` | ✅ |
34+
| `[nzSize]` | 大小，提供 `large` `default` 和 `small` 三种大小 | `'large' \| 'small' \| 'default'` | `'default'` | ✅ |
35+
| `[nzTabBarExtraContent]` | tab bar 上额外的元素 | `TemplateRef<void>` | - |
36+
| `[nzTabBarStyle]` | tab bar 的样式对象 | `object` | - |
37+
| `[nzTabPosition]` | 页签位置，可选值有 `top` `right` `bottom` `left` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | |
38+
| `[nzType]` | 页签的基本样式 | `'line' \| 'card' \| 'editable-card'` | `'line'` | ✅ |
39+
| `[nzTabBarGutter]` | tabs 之间的间隙 | `number` | - | ✅ |
40+
| `[nzHideAll]` | 是否隐藏所有 tab 内容 | `boolean` | `false` |
41+
| `[nzLinkRouter]` | 与 Angular 路由联动 | `boolean` | `false` | |
42+
| `[nzLinkExact]` | 以严格匹配模式确定联动的路由 | `boolean` | `true` |
43+
| `[nzCanDeactivate]` | 决定一个 tab 是否可以被切换 | `NzTabsCanDeactivateFn` | - |
44+
| `[nzCentered]` | 标签居中展示 | `boolean` | `false` |
45+
| `(nzSelectedIndexChange)` | 当前激活 tab 面板的 序列号变更回调函数 | `EventEmitter<number>` | - |
46+
| `(nzSelectChange)` | 当前激活 tab 面板变更回调函数 | `EventEmitter<{index: number,tab: NzTabComponent}>` | - |
47+
48+
### nz-tabset[nzType="editable-card"]:standalone
49+
50+
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
51+
| ------------- | -------------------- | --------------------------------- | ------- | -------- |
52+
| `[nzHideAdd]` | 隐藏添加按钮 | `boolean` | `false` |
53+
| `[nzAddIcon]` | 添加按钮图标 | `string \| TemplateRef<void>` | - |
54+
| `(nzAdd)` | 点击添加按钮时的事件 | `EventEmitter<>` | - |
55+
| `(nzClose)` | 点击删除按钮时的事件 | `EventEmitter<{ index: number }>` | - |
56+
57+
### nz-tab:standalone
58+
59+
| 参数 | 说明 | 类型 | 默认值 |
60+
| ----------------- | ------------------------- | ------------------------------------------- | ------- |
61+
| `[nzTitle]` | 选项卡头显示文字 | `string \| TemplateRef<TabTemplateContext>` | - |
62+
| `[nzForceRender]` | 被隐藏时是否渲染 DOM 结构 | `boolean` | `false` |
63+
| `[nzDisabled]` | 是否禁用 | `boolean` | - |
64+
| `(nzClick)` | 单击 title 的回调函数 | `EventEmitter<void>` | - |
65+
| `(nzContextmenu)` | 右键 title 的回调函数 | `EventEmitter<MouseEvent>` | - |
66+
| `(nzSelect)` | tab 被选中的回调函数 | `EventEmitter<void>` | - |
67+
| `(nzDeselect)` | tab 被取消选中的回调函数 | `EventEmitter<void>` | - |
68+
69+
### nz-tabset[nzType="editable-card"] > nz-tab:standalone
70+
71+
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
72+
| --------------- | ------------ | ----------------------------- | ------- | -------- |
73+
| `[nzClosable]` | 显示删除按钮 | `boolean` | `false` |
74+
| `[nzCloseIcon]` | 关闭按钮图标 | `string \| TemplateRef<void>` | - |
7675

7776
#### `nz-tab[nzTitle]` 的模版引用变量
7877

79-
| 属性 | 说明 | 类型 |
80-
| --- | --- | --- |
78+
| 属性 | 说明 | 类型 |
79+
| --------- | ------------------------------------------------------- | --------- |
8180
| `visible` | 表示是否在可见区域, 为 `false` 时将会被渲染到下拉菜单中 | `boolean` |
8281

8382
在 `nz-tab[nzTitle]` 中使用
83+
8484
```html
8585
<nz-tab [nzTitle]="titleTemplate">
8686
...
@@ -89,6 +89,7 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs';
8989
```
9090

9191
在 `*nzTabLink` 中使用
92+
9293
```html
9394
<nz-tab>
9495
<a *nzTabLink="let visible = visible" nz-tab-link [routerLink]="['.']">...</a>

‎components/tabs/tab-add-button.component.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55

66
import { Component, ElementRef, Input, TemplateRef } from '@angular/core';
77

8+
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
89
import { NzSafeAny } from 'ng-zorro-antd/core/types';
10+
import { NzIconModule } from 'ng-zorro-antd/icon';
911

1012
@Component({
1113
selector: 'nz-tab-add-button, button[nz-tab-add-button]',
@@ -18,7 +20,9 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
1820
class: 'ant-tabs-nav-add',
1921
'aria-label': 'Add tab',
2022
type: 'button'
21-
}
23+
},
24+
imports: [NzOutletModule, NzIconModule],
25+
standalone: true
2226
})
2327
export class NzTabAddButtonComponent {
2428
@Input() addIcon: string | TemplateRef<NzSafeAny> = 'plus';

0 commit comments

Comments
 (0)