Components / Layout / TabStrip
All components

Tabs

You can instantiate the TabStrip tabs by initializing them as KendoTabStripTab components and use their corresponding properties.

The TabStrip provides the following configuration options for its tabs:

Displaying Tabs on Initial Load

The TabStrip displays no tabs when it is initially loaded. To change this behavior, set the selected property of the tab.

@Component({
  selector: 'my-app',
  template: `
      <kendo-tabstrip>
        <kendo-tabstrip-tab [title]="'Tab 1'">
          <ng-template kendoTabContent>
            <p>Tab 1 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Tab 2'" [selected]="true">
          <ng-template kendoTabContent>
            <p>Tab 2 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Tab 3'">
          <ng-template kendoTabContent>
            <p>Tab 3 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
      </kendo-tabstrip>
    `,
    styles: [`
        kendo-tabstrip p {
            margin: 0;
            padding: 8px;
        }
    `]
})
class AppComponent {}

Disabled Tabs

You can disable a specific TabStrip tab by setting the disabled property to true.

@Component({
  selector: 'my-app',
  template: `
    <kendo-tabstrip>
        <kendo-tabstrip-tab [title]="'Tab 1'">
          <ng-template kendoTabContent>
            <p>Tab 1 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Tab 2 (disabled)'" [disabled]="true">
          <ng-template kendoTabContent>
            <p>Tab 2 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Tab 3'">
          <ng-template kendoTabContent>
            <p>Tab 3 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
      </kendo-tabstrip>
    `,
    styles: [`
        kendo-tabstrip p {
            margin: 0;
            padding: 8px;
        }
    `]
})
class AppComponent {}

Titles

You can handle the title of each TabStrip tab by using the title attribute of the tab. Apart from plain text, a tab title can also accommodate any Angular component.

@Component({
  selector: 'my-app',
  template: `
      <kendo-tabstrip>
        <kendo-tabstrip-tab [title]="'Tab 1 Title'">
          <ng-template kendoTabContent>
            <p>Tab 1 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Tab 2 Title'">
          <ng-template kendoTabContent>
            <p>Tab 2 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Tab 3 Title'">
          <ng-template kendoTabContent>
            <p>Tab 3 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
      </kendo-tabstrip>
    `,
    styles: [`
        kendo-tabstrip p {
            margin: 0;
            padding: 8px;
        }
    `]
})

class AppComponent {}

Position

You can control the position of the tabs by setting the tabPosition property to top, right, bottom, or left. The default position is top.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
      <p>Tab position:</p>
      <input id="top" name="pos" type="radio" [(ngModel)]="position" value="top">
      <label for="top">Top</label>
      <input id="right" name="pos" type="radio" [(ngModel)]="position" value="right">
      <label for="right">Right</label>
      <input id="bottom" name="pos" type="radio" [(ngModel)]="position" value="bottom">
      <label for="bottom">Bottom</label>
      <input id="left" name="pos" type="radio" [(ngModel)]="position" value="left">
      <label for="left">Left</label>
    </div>
    <div class="example-wrapper">
    <kendo-tabstrip [tabPosition]="position">
        <kendo-tabstrip-tab title="Tab 1" [selected]="true">
          <ng-template kendoTabContent>
            <p>Tab 1 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab title="Tab 2">
          <ng-template kendoTabContent>
            <p>Tab 2 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab title="Tab 3">
          <ng-template kendoTabContent>
            <p>Tab 3 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
    </kendo-tabstrip>
    </div>
    `
})
export class AppComponent {
    public position = 'top';
}

Alignment

You can control the alignment of the tabs by setting the tabAlignment property to start, end, center, or justify.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
      <p>Tab alignment:</p>
      <label><input name="align" type="radio" [(ngModel)]="alignment" value="start"> Start</label>
      <label><input name="align" type="radio" [(ngModel)]="alignment" value="end"> End</label>
      <label><input name="align" type="radio" [(ngModel)]="alignment" value="center"> Center</label>
      <label><input name="align" type="radio" [(ngModel)]="alignment" value="justify"> Justify</label>
    </div>
    <div class="example-wrapper">
    <kendo-tabstrip [tabAlignment]="alignment">
        <kendo-tabstrip-tab title="Tab 1" [selected]="true">
          <ng-template kendoTabContent>
            <p>Tab 1 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab title="Tab 2">
          <ng-template kendoTabContent>
            <p>Tab 2 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab title="Tab 3">
          <ng-template kendoTabContent>
            <p>Tab 3 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
    </kendo-tabstrip>
    </div>
    `
})
export class AppComponent {
    public alignment = 'start';
}

In this article