Angular4 Kendo UI TabStrip - 페이지 너비보다 많은 탭 처리

Question

사용 가능한 너비보다 많은 탭이있는 상황을 처리 할 수있는 방법이 있습니까?

내비게이션에서 선택한 항목이 새 탭에서 동적으로 열리거나 활성 탭이 이미 열려있는 경우 변경되는 시나리오가 있습니다. 따라서 주어진 시간에 폭이 표시 될 수있는 것보다 더 많은 탭이 발생할 가능성이 높습니다. 이 상황을 처리 할 수있는 설명서에서 아무것도 찾을 수없는 것 같습니다. 최소한 appendTo이나 뭔가를 사용할 가능성을 찾고 있었는데, 탭 머리글과 탭 내용에 대한 컨테이너를 분리 할 수있는 곳을 찾고있었습니다. 그래서 머리글 만 왼쪽이나 오른쪽으로 스크롤 할 수있는 단추를 사용할 수 있습니다.

이 몇 가지 탭이있을 때 중대하다 :

는하지만 그들 중 이상이 탐색 나누기가 열려있는 경우 더 이상 사용 가능한 공간이 없습니다로 컨테이너, 수평 스크롤을 가져옵니다

가 내 목표는 (숨겨진 탭으로 이동하기 위해 화살표 버튼)이 같은 것입니다 :

편집을 좋아, 그래서 이것을 찾았다 javascript kendo scrollable tabs. 그것은 내가 염두에 두었던 것이지만, 각도 꾸미기로 이것을 달성 할 수는 없습니다.

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> 

좀 가짜 스크롤 :