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
animation?
boolean | DrawerAnimation
Specifies the animation settings of the Drawer. (see example).
The possible values are:
- Boolean
- (Default)
true
false
- (Default)
DrawerAnimation
- (Default)
type?: 'slide'
duration
—Accepts a number in milliseconds. Defaults to300ms
.
- (Default)
autoCollapse
boolean
Specifies if the Drawer will be automatically collapsed when an item
or the overlay is clicked. Defaults to true
.
expanded
boolean
Specifies the state of the Drawer.
mini
boolean
Enables the mini (compact) view of the Drawer which is displayed when the component is collapsed (see example).
miniWidth
number
Defines the width of the Drawer when the mini view is enabled
and the component is collapsed. Defaults to 60
.
mode
Specifies the mode in which the Drawer will be displayed.
The possible values are:
- (Default)
overlay
push
position
Specifies the position of the Drawer (see example).
The possible values are:
- (Default)
start
end
width
number
Defines the width of the Drawer when it is expanded.
Defaults to 240
.
items
any[]
The collection of items that will be rendered in the Drawer.
Events
collapse
EventEmitter<any>
Fires when the Drawer is collapsed and its animation is complete.
expand
EventEmitter<any>
Fires when the Drawer is expanded and its animation is complete.
expandedChange
EventEmitter<boolean>
Fires when the expanded
property of the component was updated.
Used to provide a two-way binding for the expanded
property.
select
Fires when a Drawer item is selected. This event is preventable.
Methods
toggle
Toggles the visibility of the Drawer.
Parameters
expanded?
boolean