DrawerComponent
Represents the Kendo UI Drawer component for Angular.
@Component({
selector: 'my-app',
template: `
<kendo-drawer-container>
<kendo-drawer #drawer
[items]="items"
mode="overlay"
[(expanded)]="expanded">
</kendo-drawer>
<kendo-drawer-content>
<button class="k-button" (click)="drawer.toggle()">Open the Drawer</button>
</kendo-drawer-content>
</kendo-drawer-container>
`
})
class AppComponent {
public expanded = false;
public items: any[] = [
{ text: 'Inbox', icon: 'k-i-inbox' },
{ text: 'Notifications', icon: 'k-i-bell' },
{ text: 'Date', icon: 'k-i-calendar' }
];
}Selector
kendo-drawer
Export Name
Accessible in templates as #kendoDrawerInstance="kendoDrawer"
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
animation? |
|
Specifies the animation settings of the Drawer. (see example). The possible values are:
| |
autoCollapse |
|
Specifies if the Drawer will be automatically collapsed when an item
or the overlay is clicked. Defaults to | |
expanded |
|
Specifies the state of the Drawer. | |
isItemExpanded |
|
Defines a callback function which determines if an item should be expanded. | |
items |
|
The collection of items that will be rendered in the Drawer. | |
mini |
|
Enables the mini (compact) view of the Drawer which is displayed when the component is collapsed (see example). | |
miniWidth |
|
Defines the width of the Drawer when the mini view is enabled
and the component is collapsed. Defaults to | |
mode |
|
Specifies the mode in which the Drawer will be displayed. The possible values are:
| |
position |
|
Specifies the position of the Drawer (see example). The possible values are:
| |
width |
|
Defines the width of the Drawer when it is expanded.
Defaults to |
Events
| Name | Type | Description |
|---|---|---|
collapse |
|
Fires when the Drawer is collapsed and its animation is complete. |
expand |
|
Fires when the Drawer is expanded and its animation is complete. |
expandedChange |
|
Fires when the |
select |
|
Fires when a Drawer item is selected. This event is preventable. |
Methods
toggle | ||||||
|---|---|---|---|---|---|---|
|
Toggles the visibility of the Drawer. | ||||||
|
