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
• Disabled tabs
• Titles
• Position
• Alignment

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.

Disabled Tabs

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

Copy Code@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.

Copy Code@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.

Copy Code@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.

Copy Code@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';
}

Suggested Links

• API Reference of the TabStripTab Component
• API Reference of the TabStrip