feat(abc:reuse-tab): add tabMaxWidth property (#690)

- close ng-alain/ng-alain#1336
ng-alain · Sep 24, 2019 · 19cc818 · 19cc818
1 parent 123c29e
commit 19cc818
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 1 deletion.
diff --git 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
@@ -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
@@ -5,7 +5,11 @@
   [nzTabBarStyle]="tabBarStyle">
   <nz-tab *ngFor="let i of list; let index = index" [nzTitle]="titleTemplate">
     <ng-template #titleTemplate>
-      <span [reuse-tab-context-menu]="i" [customContextMenu]="customContextMenu" class="reuse-tab__name">{{i.title}}</span>
+      <div [reuse-tab-context-menu]="i" [customContextMenu]="customContextMenu" class="reuse-tab__name" [attr.title]="i.title">
+        <span [class.reuse-tab__name-width]="tabMaxWidth" [style.max-width.px]="tabMaxWidth">
+          {{i.title}}
+        </span>
+      </div>
       <i *ngIf="i.closable" nz-icon nzType="close" class="reuse-tab__op" (click)="_close($event, index, false)"></i>
     </ng-template>
   </nz-tab>

diff --git 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
@@ -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
@@ -32,6 +32,11 @@
         @{reuse-tab-prefix}__name {
           display: inline-block;
           padding: 8px 20px;
+          &-width {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline-block;
+          }
         }
       }
     }