All Components

Layout Overview

The Layout controls create a perceptive and intuitive layout of web projects to provide for an easier navigation.

The package includes the following components:

  • Tabstrip—Displays a collection of tabs with associated content, which allow the user to open many pages inside a single window. Each tab represents a separate location and by selecting a particular tab, the user navigates between the tab pages.
  • PanelBar—Displays hierarchical data as a multi-level, expandable component.

Basic Usage

The following example demonstrates the Tabstrip and PanelBar components in action.

@Component({
  selector: 'my-app',
  template: `
     <h3>TabStrip</h3>
     <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>

     <h3>PanelBar</h3>
     <div class="panelbar-wrapper">
         <kendo-panelbar>
             <kendo-panelbar-item title="My Teammates" expanded="true">
                 <template kendoPanelBarContent>
                     <div [class]="teamMateGroup">
                         <div class="teamMate">
                             <img [src]="imageUrl('andrew')" alt="Andrew Fuller" width="72" height="72">
                             <h2>Andrew Fuller</h2>
                             <p>Team Lead</p>
                         </div>
                         <div class="teamMate">
                             <img [src]="imageUrl('nancy')" alt="Nancy Leverling" width="72" height="72">
                             <h2>Nancy Leverling</h2>
                             <p>Sales Associate</p>
                         </div>
                         <div class="teamMate">
                             <img [src]="imageUrl('robert')" alt="Robert King" width="72" height="72">
                             <h2>Robert King</h2>
                             <p>Business System Analyst</p>
                         </div>
                     </div>
                 </template>
             </kendo-panelbar-item>
             <kendo-panelbar-item title="Projects">
                 <kendo-panelbar-item title="New Business Plan"></kendo-panelbar-item>
                 <kendo-panelbar-item title="Sales Forecasts">
                     <kendo-panelbar-item title="Q1 Forecast"></kendo-panelbar-item>
                     <kendo-panelbar-item title="Q2 Forecast"></kendo-panelbar-item>
                     <kendo-panelbar-item title="Q3 Forecast"></kendo-panelbar-item>
                     <kendo-panelbar-item title="Q4 Forecast"></kendo-panelbar-item>
                 </kendo-panelbar-item>
                 <kendo-panelbar-item title="Sales Reports"></kendo-panelbar-item>
             </kendo-panelbar-item>
             <kendo-panelbar-item title="Programs">
                 <kendo-panelbar-item title="Monday"></kendo-panelbar-item>
                 <kendo-panelbar-item title="Tuesday"></kendo-panelbar-item>
                 <kendo-panelbar-item title="Wednesday"></kendo-panelbar-item>
                 <kendo-panelbar-item title="Thursday"></kendo-panelbar-item>
                 <kendo-panelbar-item title="Friday"></kendo-panelbar-item>
             </kendo-panelbar-item>
             <kendo-panelbar-item title="Communication" disabled="true"></kendo-panelbar-item>
         </kendo-panelbar>
     </div>
    `,
    styles: [`
        .teamMate:after {
            content: ".";
            display: block;
            height: 0;
            line-height: 0;
            clear: both;
            visibility: hidden;
        }
        .teamMate h2 {
            font-size: 1.4em;
            font-weight: normal;
            padding-top: 20px;
            margin: 0;
        }
        .teamMate p {
            margin: 0;
        }
        .teamMate img {
            float: left;
            margin: 5px 15px 5px 5px;
            border: 1px solid #ccc;
            border-radius: 50%;
        }
        .teamMateGroup {
            padding: 10px;
        }
        .panelbar-wrapper {
            max-width: 400px;
        }
    `]
})
class AppComponent {
  private baseImageUrl: string = "http://demos.telerik.com/kendo-ui/content/web/panelbar/";

  private imageUrl(imageName: string) :string {
    return this.baseImageUrl + imageName + ".jpg";
  }
}

Installation

  1. The Layout package is published on the Progress NPM Registry. To set up your access, follow the steps in Installation.

  2. Download and install the package:

    npm install --save @progress/kendo-angular-layout
    
  3. Once installed, import the LayoutModule in your application root module:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { LayoutModule } from '@progress/kendo-angular-layout';
    import { AppComponent } from './app.component';
    
    @NgModule({
        bootstrap:    [AppComponent],
        declarations: [AppComponent],
        imports:      [BrowserModule, LayoutModule]
    })
    export class AppModule {
    }
    

Dependencies

The Layout package requires the following peer dependencies that have to be installed by your application:

  • @angular/common
  • @angular/core
  • rxjs
In this article