All Components

Tabstrip Overview

The Tabstrip displays a collection of tabs with associated content, which allow the user to switch between different views inside a single component.

Demos

The following example demonstrates the basic usage of the Tabstrip.

@Component({
  selector: 'my-app',
  template: `
     <kendo-tabstrip>
       <kendo-tabstrip-tab [title]="'Paris'" [selected]="true">
            <template kendoTabContent>
                  <span class="rainy">&nbsp;</span>
                  <div class="weather">
                    <h2>17<span>&ordm;C</span></h2>
                    <p>Rainy weather in Paris.</p>
                  </div>
            </template>
       </kendo-tabstrip-tab>
       <kendo-tabstrip-tab [title]="'New York'">
            <template kendoTabContent>
              <span class="sunny">&nbsp;</span>
                <div class="weather">
                  <h2>29<span>&ordm;C</span></h2>
                  <p>Sunny weather in New York.</p>
                </div>
            </template>
       </kendo-tabstrip-tab>
     </kendo-tabstrip>
    `
})
class AppComponent {}

Configuration

Tabs

The tabs have to be initialized as KendoTabstripTab components with the corresponding properties.

Titles

Each tab displays a title prompting the tab content. To handle the tab title, set the title attribute of the Tab.

@Component({
  selector: 'my-app',
  template: `
     <kendo-tabstrip>
       <kendo-tabstrip-tab [title]="'tab1'">
            <template kendoTabContent>
              <span class="rainy">&nbsp;</span>
              <div class="weather">
                <h2>17<span>&ordm;C</span></h2>
                <p>Rainy weather in Paris.</p>
              </div>
            </template>
       </kendo-tabstrip-tab>
       <kendo-tabstrip-tab [title]="'tab1'">
            <template kendoTabContent>
              <span class="sunny">&nbsp;</span>
              <div class="weather">
                <h2>29<span>&ordm;C</span></h2>
                <p>Sunny weather in New York.</p>
              </div>
            </template>
       </kendo-tabstrip-tab>
     </kendo-tabstrip>
    `
})

class AppComponent {}

Apart from plain text, a tab title is also able to accommodate any Angular component.

Initial Loading

The Tabstrip does not display a tab upon its initial loading. To change this behavior, set the selected property of the tab.

@Component({
  selector: 'my-app',
  template: `
     <kendo-tabstrip>
       <kendo-tabstrip-tab [title]="'Paris'" [selected]="true">
            <template kendoTabContent>
              <span class="rainy">&nbsp;</span>
              <div class="weather">
                <h2>17<span>&ordm;C</span></h2>
                <p>Rainy weather in Paris.</p>
              </div>
            </template>
       </kendo-tabstrip-tab>
       <kendo-tabstrip-tab [title]="'New York'">
            <template kendoTabContent>
              <span class="sunny">&nbsp;</span>
              <div class="weather">
                <h2>29<span>&ordm;C</span></h2>
                <p>Sunny weather in New York.</p>
              </div>
            </template>
       </kendo-tabstrip-tab>
     </kendo-tabstrip>
    `
})
class AppComponent {}

Disabling

The Tabstrip lets you disable specific tabs. To disable a tab, add the disabled attribute.

@Component({
  selector: 'my-app',
  template: `
     <kendo-tabstrip>
       <kendo-tabstrip-tab [title]="'Paris'" [selected]="true">
            <template kendoTabContent>
              <span class="rainy">&nbsp;</span>
              <div class="weather">
                <h2>17<span>&ordm;C</span></h2>
                <p>Rainy weather in Paris.</p>
              </div>
            </template>
       </kendo-tabstrip-tab>
       <kendo-tabstrip-tab [title]="'New York'" [disabled]="true">
            <template kendoTabContent>
              <span class="sunny">&nbsp;</span>
              <div class="weather">
                <h2>29<span>&ordm;C</span></h2>
                <p>Sunny weather in New York.</p>
              </div>
            </template>
      </kendo-tabstrip-tab>
     </kendo-tabstrip>
    `
})
class AppComponent {}

Structural Directives

Configuration components can be built by using Angular structural directives. The following example uses the ngFor directive.

@Component({
  selector: 'my-app',
  template: `
     <kendo-tabstrip [ngStyle]="{'width': '400px'}">
        <kendo-tabstrip-tab
          *ngFor="let item of items let i=index"
          [title]="item.city"
          [selected]="i == selected"
          [disabled]="item.disabled"
        >
            <template kendoTabContent>
              <span class="rainy">&nbsp;</span>
              <div class="weather">
                <h2>{{item.temp}}<span>&ordm;C</span></h2>
                <p>Rainy weather in {{item.city}}.</p>
              </div>
            </template>
        </kendo-tabstrip-tab>
      </kendo-tabstrip>
    `
})

export class AppComponent {
  public selected: number = 1;
  public items: any = [{
            disabled: true,
            city: "Paris",
            temp: 17
      }, {
            disabled: false,
            city: "New York",
            temp: 29
      }, {
            disabled: false,
            city: "Sofia",
            temp: 23
      }]
}

Keyboard Navigation

Below is the list with the keyboard shortcuts the Tabstrip supports.

SHORTCUT DESCRIPTION
Upper Arrow & Left Arrow keys Select the previous tab. If there is no previous tab, select the last tab.
Down Arrow & Right Arrow keys Select the next tab. If there is no next tab, select the first tab.
Home Select the first tab.
End Select the last tab.
In this article