Angular4 Kendo UI TabStrip - 处理比页面宽度支持更多的标签

Question

有什么方法可以处理选项卡的数量超过可用宽度可以显示的情况吗？

我有一个场景，从导航中选择的项目在新选项卡中动态打开（或者如果活动选项卡已经打开则更改）。因此，很可能在给定时间打开的选项卡数量超过了宽度可以显示的数量。我似乎无法在允许我处理这种情况的文档中找到任何内容。我一直在寻找至少使用 appendTo 或类似的东西的可能性，我可以在其中将选项卡 headers 和选项卡内容的容器分开，这样我就可以做一些类似按钮的事情来滚动 headers 独自一左一右

这在选项卡很少的情况下非常有用：

但是如果更多的打开，导航中断并且容器获得水平滚动条，因为没有更多 space 可用：

我的 objective 是这样的（用箭头按钮导航到隐藏的选项卡）：

编辑好的，所以我找到了这个 javascript kendo scrollable tabs。这正是我的想法，但我无法通过 angular kendo-ui

实现

Answer 1

好吧，没有开箱即用的水平滚动条，但选项卡的集合可以是一个变量。所以在这种情况下你可以实现一些简单的分页。像

import { Component } from '@angular/core';

@Component({
    selector: 'app-list',
    templateUrl: './list.component.html'
})
export class ListComponent {

    public allTabs = [ 
        { name: '1111', content: ' content 1 '},
        { name: '2222', content: ' content 2 '}
        { name: '3333', content: ' content 3 '}
        { name: '4444', content: ' content 4 '}
        { name: '5555', content: ' content 5 '}
    ];

    public totalPages = 0;

    public currentTabs = this.allTabs.slice(0, 2);

    public pageSize: number = 2;

    public currentPage = 1;

    public nextPage() {
        this.currentPage++;
        this.currentTabs = this.allTabs.slice((this.currentPage - 1) * this.pageSize, (this.currentPage) * this.pageSize);
    }

    public prevPage() {
        this.currentPage--;
        this.currentTabs = this.allTabs.slice((this.currentPage - 1) * this.pageSize, (this.currentPage) * this.pageSize);
    }

    constructor (){
        this.totalPages = Math.round(this.allTabs.length / this.pageSize);
    }
}

和模板

<kendo-tabstrip [ngStyle]="{'width': '400px'}">
    <kendo-tabstrip-tab
      *ngFor="let item of currentTabs; let i=index"
      [title]="item.name"
      [selected]="i === 0"      
    >
        <ng-template kendoTabContent>
          {{  item.content }}
        </ng-template>
    </kendo-tabstrip-tab>
  </kendo-tabstrip>

  <button type="button" (click)="prevPage()" [disabled]="currentPage === 1">Prev</button>
  <button type="button" (click)="nextPage()" [disabled]="currentPage === totalPages">Next</button>

有点假卷轴:)

Angular4 Kendo UI TabStrip - 处理比页面宽度支持更多的标签

Angular4 Kendo UI TabStrip - handle more tabs than page width supports

kendo-tabstrip

kendo-ui-angular2

angular