diff --git a/packages/abc/reuse-tab/index.en-US.md b/packages/abc/reuse-tab/index.en-US.md index 0f56b16f7..0e8c3e35b 100644 --- a/packages/abc/reuse-tab/index.en-US.md +++ b/packages/abc/reuse-tab/index.en-US.md @@ -199,6 +199,7 @@ Property | Description | Type | Default `[tabBarStyle]` | Tab bar style object | `object` | - `[tabBarGutter]` | The gap between tabs | `number` | - `[tabType]` | Basic style of tabs | `line, card` | `line` +`[tabMaxWidth]` | The maximum width of each tab, unit: `px` | `number` | - `(close)` | Close callback event | `EventEmitter` | - `(change)` | Callback when switching | `EventEmitter` | - diff --git a/packages/abc/reuse-tab/index.zh-CN.md b/packages/abc/reuse-tab/index.zh-CN.md index 8b0f0e3ec..11de3a449 100644 --- a/packages/abc/reuse-tab/index.zh-CN.md +++ b/packages/abc/reuse-tab/index.zh-CN.md @@ -200,6 +200,7 @@ export class DemoComponent { `[tabBarStyle]` | tab bar 的样式对象 | `object` | - `[tabBarGutter]` | tabs 之间的间隙 | `number` | - `[tabType]` | tabs 页签的基本样式 | `line, card` | `line` +`[tabMaxWidth]` | tabs 页签每一项最大宽度,单位:`px` | `number` | - `(close)` | 关闭回调 | `EventEmitter` | - `(change)` | 切换时回调,接收的参数至少包含:`active`、`list` 两个参数 | `EventEmitter` | - diff --git a/packages/abc/reuse-tab/reuse-tab.component.html b/packages/abc/reuse-tab/reuse-tab.component.html index 722400d4d..0413daa6a 100644 --- a/packages/abc/reuse-tab/reuse-tab.component.html +++ b/packages/abc/reuse-tab/reuse-tab.component.html @@ -5,7 +5,11 @@ [nzTabBarStyle]="tabBarStyle"> - {{i.title}} +
+ + {{i.title}} + +
diff --git a/packages/abc/reuse-tab/reuse-tab.component.spec.ts b/packages/abc/reuse-tab/reuse-tab.component.spec.ts index aef768ebc..d05615e7b 100644 --- a/packages/abc/reuse-tab/reuse-tab.component.spec.ts +++ b/packages/abc/reuse-tab/reuse-tab.component.spec.ts @@ -270,6 +270,15 @@ describe('abc: reuse-tab', () => { expect(dl.queryAll(By.css('.reuse-tab__op')).length).toBe(0); })); }); + describe('#tabMaxWidth', () => { + it('with 100', () => { + layoutComp.tabMaxWidth = 100; + fixture.detectChanges(); + const el = page.getEl('.reuse-tab__name-width'); + expect(el != null).toBe(true); + expect(el.style.maxWidth).toBe(`100px`); + }); + }); }); describe('[context-menu]', () => { @@ -842,6 +851,7 @@ class AppComponent {} [keepingScrollContainer]="keepingScrollContainer" [customContextMenu]="customContextMenu" [tabType]="tabType" + [tabMaxWidth]="tabMaxWidth" (change)="change($event)" (close)="close($event)" > @@ -862,6 +872,7 @@ class LayoutComponent { keepingScrollContainer: Window | Element | string | null = null; customContextMenu: ReuseCustomContextMenu[] = []; tabType: 'line' | 'card' = 'line'; + tabMaxWidth: number; change() {} close() {} } diff --git a/packages/abc/reuse-tab/reuse-tab.component.ts b/packages/abc/reuse-tab/reuse-tab.component.ts index 554c0df6c..0b06d4c74 100644 --- a/packages/abc/reuse-tab/reuse-tab.component.ts +++ b/packages/abc/reuse-tab/reuse-tab.component.ts @@ -65,6 +65,7 @@ export class ReuseTabComponent implements OnInit, OnChanges, OnDestroy { @Input() i18n: ReuseContextI18n; @Input() @InputBoolean() debug = false; @Input() @InputNumber() max: number; + @Input() @InputNumber() tabMaxWidth: number; @Input() excludes: RegExp[]; @Input() @InputBoolean() allowClose = true; @Input() @InputBoolean() showCurrent = true; diff --git a/packages/abc/reuse-tab/style/index.less b/packages/abc/reuse-tab/style/index.less index 3d679e7eb..6e6a1c5e4 100644 --- a/packages/abc/reuse-tab/style/index.less +++ b/packages/abc/reuse-tab/style/index.less @@ -32,6 +32,11 @@ @{reuse-tab-prefix}__name { display: inline-block; padding: 8px 20px; + &-width { + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + } } } }