Display Modes

The Drawer provides expand modes and a compact mini view.

Expand Modes

For displaying its content, the Drawer provides the following expand modes:

  • "overlay"—The Drawer expands on top of the container content and displays a grayed overlay over it.
  • "push"—The Drawer expands side by side to the container content by shrinking its width.

To configure the expand mode, use the mode property of the Drawer.

import { Component, ViewEncapsulation } from '@angular/core';
import { DrawerItem, DrawerMode } from '@progress/kendo-angular-layout';

@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'my-app',
    styles: [`
        my-app {
            padding: 0;
        }

        kendo-drawer-container {
            position: fixed;
            width: 100%;
            height: 100%;
        }
    `],
    template: `
    <kendo-drawer-container>
        <kendo-drawer #drawer
            [items]="items"
            [mode]="expandMode"
            [expanded]="true">
        </kendo-drawer>

        <kendo-drawer-content>
            <div class="k-form">
                <div class="k-form-field">
                    <button class="k-button" (click)="drawer.toggle()">Toggle the Drawer</button>
                </div>
                <div class="k-form-field">
                    <label for="expandSwitch">Switch Drawer expand mode</label>
                    <kendo-switch
                        id="expandSwitch"
                        checked="true"
                        [onLabel]="' '"
                        [offLabel]="' '"
                        (valueChange)="onExpandModeChange($event)">
                    </kendo-switch>
                </div>
                <div class="k-form-field">
                    <p>Current drawer mode is <b>{{ expandMode }}</b></p>
                </div>
            </div>
        </kendo-drawer-content>
    </kendo-drawer-container>
    `
})
export class AppComponent {
    public expandMode: DrawerMode = 'overlay';

    public items: Array<DrawerItem> = [
        { text: 'Inbox', icon: 'k-i-inbox', selected: true },
        { separator: true },
        { text: 'Notifications', icon: 'k-i-bell' },
        { text: 'Calendar', icon: 'k-i-calendar' },
        { separator: true },
        { text: 'Attachments', icon: 'k-i-hyperlink-email' },
        { text: 'Favourites', icon: 'k-i-star-outline' }
    ];

    public onExpandModeChange(checked: boolean): void {
        this.expandMode = checked ? 'overlay' : 'push';
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        LayoutModule,
        InputsModule
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule {}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Mini View

To enable the compact view which is displayed when the Drawer is collapsed, use its mini option. By default, when the Drawer is minimized, it will display only the item icon. To override this behavior, specify an item template.

When the mini option is enabled, the Drawer will always be visible even when it is collapsed.

import { Component, ViewEncapsulation } from '@angular/core';
import { DrawerItem } from '@progress/kendo-angular-layout';

@Component({
    selector: 'my-app',
    template: `
    <kendo-drawer-container>
        <kendo-drawer #drawer
            [items]="items"
            [mode]="'push'"
            [mini]="true"
            [(expanded)]="expanded">
        </kendo-drawer>

        <kendo-drawer-content>
            <button class="k-button" (click)="drawer.toggle()">Toggle the Drawer</button>
        </kendo-drawer-content>
    </kendo-drawer-container>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        my-app { padding: 0; }

        kendo-drawer-content { padding: 10px; }

        kendo-drawer-container {
            position: fixed;
            width: 100%;
            height: 100%;
        }
    `]
})
export class AppComponent {
    public expanded = false;

    public items: DrawerItem[] = [
        { text: 'Inbox', icon: 'k-i-inbox' },
        { text: 'Notifications', icon: 'k-i-bell' },
        { text: 'Favourites', icon: 'k-i-star-outline' },
        { text: 'Date', icon: 'k-i-calendar' }
    ];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        LayoutModule,
        InputsModule
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule {}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article