Animation in EJ 1 Angular NavigationDrawer (Navigation Drawer)
8 Jun 2017 / 2 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.
Before target click
After target click
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page