Animations
8 Jun 20172 minutes to read
You can set the transition type of the Navigation Drawer by using type property. The possible transition types are slide and overlay.
- Slide - Both navigation panel and content page slides towards left/right direction to view the navigation panel items.
- Overlay - Only the navigation panel slides over the content page to view the navigation panel items. That is, part of the content page is hidden under navigation panel.
NOTE
_ Transition slide type works only with fixed position._
The default value is Overlay.
In the HTML page set the type and position of Navigationdrawer.
<div ej-navigationdrawer id="navpane" targetId="drawerTarget" type="slide" direction="left" [enableListView]="enablelistview" position="fixed" [listViewSettings]="listviewsettings">
<ul>
<li>Settings</li>
<li>Read</li>
<li>Help</li>
<li>About</li>
</ul>
</div>
<div>
<input type="button" ej-button id="drawerTarget" text="Open Drawer" style="top:200px;left:400px;position:absolute" />
</div>
export class AppComponent {
enablelistview: any;
listviewsettings: any;
constructor() {
this.enablelistview = true;
this.listviewsettings = { height: 500 };
}
}
The following screenshot illustrates the output.