有没有办法处理比availe宽度可以显示更多选项卡的情况?
我有一个场景,从导航中选择的项目在新选项卡中动态打开(如果活动选项卡已经打开,则会更改)。所以碰巧有一个很大的机会,可以显示更多的标签,宽度可以显示在给定时间打开。我似乎无法找到允许我处理这种情况的文档。我一直在寻找使用appendTo
或类似东西的可能性,我可以在其中分隔标签和标签内容的容器,这样我就可以做一些像按钮一样向左或向右滚动标题。
但是如果它们中的更多是打开的,导航会中断并且容器会获得一个水平滚动条,因为没有更多可用的空间:
编辑确定,所以我找到了这个javascript kendo scrollable tabs。这正是我的想法,但我无法用角度剑道ui实现这一点
好吧,没有开箱即用的水平滚动,但标签的集合可以是一个变量。所以在这种情况下,您可以实现一些简单的分页。就像是
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>
有点假卷轴:)