Components / Layout / TabStrip

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