Getting Started with Kendo UI for Angular Drawer
The Drawer component is a dismissible panel for navigating in responsive web applications.
It also enables the user to change the content of a specific section of the page.
Basic Usage
The following example demonstrates the Drawer in action.
import { Component, ViewEncapsulation } from '@angular/core';
import { DrawerItem, DrawerSelectEvent } 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%;
}
.k-icon {
font-size: 20px;
}
.custom-toolbar {
width: 100%;
background-color: #f6f6f6;
line-height: 10px;
border-bottom: inset;
border-bottom-width: 1px;
padding: 3px 8px;
color: #656565;
}
.mail-box{
margin-left: 20px;
font-weight: bold;
font-size: 17px;
}
`],
template: `
<div class="custom-toolbar">
<button
kendoButton
icon="menu"
look="flat"
(click)="drawer.toggle()"
></button>
<span class="mail-box">Mail Box</span>
</div>
<kendo-drawer-container>
<kendo-drawer #drawer
[items]="items"
[mode]="'push'"
[mini]="true"
[expanded]="true"
(select)="onSelect($event)">
</kendo-drawer>
<kendo-drawer-content>
<my-content [selectedItem]="selected"></my-content>
</kendo-drawer-content>
</kendo-drawer-container>
`
})
export class AppComponent {
public selected = 'Inbox';
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 onSelect(ev: DrawerSelectEvent): void {
this.selected = ev.item.text;
}
}
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 { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AppComponent } from './app.component';
import { ContentComponent } from './content.component';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
LayoutModule,
ButtonsModule
],
declarations: [
AppComponent,
ContentComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
import { Component, Input, ViewEncapsulation } from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.None,
styles: [`
my-content ul {
list-style: none;
margin: 0;
padding: 0;
}
my-content li {
font-size: 1.2em;
background: 0 0;
border-radius: 0;
border-width: 0 0 1px;
border-color: rgba(33, 37, 41, 0.125);
border-style: solid;
line-height: 1.5em;
padding: 1.09em .84em 1.23em .84em;
}
my-content li:last-child {
border: 0;
}
`],
selector: 'my-content',
template: `
<div id="Inbox" *ngIf="selectedItem === 'Inbox'">
<ul class="inboxList">
<li>
<h6>Monday meeting</h6>
<p>Hi Tom, Since Monday I'll be out of office, I'm rescheduling the meeting for Tuesday.</p>
</li>
<li>
<h6>I'm sorry, Tom</h6>
<p>Hi Tom, my aunt comes for a visit this Saturday, so I can't come back to St. Pete...</p>
</li>
</ul>
</div>
<div id="Notifications" *ngIf="selectedItem === 'Notifications'">
<ul>
<li>Monday meeting</li>
<li>Regarding org chart changes</li>
<li>Meeting with Cliff</li>
<li>Global Marketing Meeting</li>
<li>Out tonight with collegues?</li>
</ul>
</div>
<div id="Calendar" *ngIf="selectedItem === 'Calendar'">
<ul>
<li>
<h6>11/5 Monday</h6>
<p>Martha Birthday</p>
</li>
<li>
<h6>15/6 Sunday</h6>
<p>Job interview for internal position</p>
</li>
</ul>
</div>
<div id="Attachments" *ngIf="selectedItem === 'Attachments'">
<ul>
<li>Build enterprise apps</li>
<li>Fw: Regarding Multiline textbox</li>
<li>Away next week</li>
<li>Fw: Your Costume is ready</li>
<li>Update completed</li>
</ul>
</div>
<div id="Favourites" *ngIf="selectedItem === 'Favourites'">
<ul>
<li>70% Discount!</li>
<li>90% Discount!</li>
<li>One time offer!</li>
</ul>
</div>
`
})
export class ContentComponent {
@Input() selectedItem: string;
}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
enableProdMode();
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);