angularkendo-ui-angular2kendo-tabstrip

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


Is there any way to handle a situation where there are more tabs than the availe width can show?

I have a scenario where items selected from navigation are dynamicaly open in new tabs (or the active tab changes if it was already open). So happens that there's a big chance of more tabs than the width can show will be open at a given time. I can't seem to find anything on the documentation that allows me to handle this situation. I was looking for at least the possibility to use an appendTo or something o the likes where I could separate the container for the tabs headers and tabs contents so that i can do something like buttons to scroll the headers alone left or right.

this is great when there are few tabs: enter image description here

but if more of them are open the nav breaks and the container gets an horizontal scroller, as there's no more space available: enter image description here

my objective is to have something like this (with arrow buttons to navigate to hidden tabs): enter image description here

Edit Ok so I found this javascript kendo scrollable tabs. It's exactly what I had in mind, but I cant achieve this with angular kendo-ui


Solution

  • well there is no horizontal scroller out of the box, but the collection of tabs can be a variable. So in this case you can implement some simple paging. something like

    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);
        }
    }
    

    and the template

    <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>
    

    kinda fake scroll :)