Showing RadSideDrawer over the navigation bar/action bar

With 2.0.0 the previous DrawerPage has been removed and replaced by a more simplistic approach using only the showOverNavigation property. More details can be found bellow in the "Migrating from DrawerPage (versions 1.x.x) to the latest version" section.

To show RadSideDrawer over the navigation bar or action bar, developers simply have to set the showOverNavigation property to true.
For example:

<nsDrawer:RadSideDrawer id="sideDrawer" showOverNavigation="true">
  <nsDrawer:RadSideDrawer.drawerContent>
    <StackLayout class="drawerContent">
      <StackLayout class="headerContent">
        <Label text="Navigation Menu"/>
      </StackLayout>
      <ScrollView>
        <StackLayout class="drawerMenuContent">
          <Label text="Primary" class="drawerSectionHeader" />
          <Label text="Social" class="drawerSectionItem" />
          <Label text="Promotions" class="drawerSectionItem" />
          <Label text="Labels" class="drawerSectionHeader" />
          <Label text="Important" class="drawerSectionItem" />
          <Label text="Starred" class="drawerSectionItem" />
          <Label text="Sent Mail" class="drawerSectionItem" />
          <Label text="Drafts" class="drawerSectionItem" />
        </StackLayout>
      </ScrollView>
      <Label text="Go to next page" tap="{{ goToSecondPage }}" class="drawerContentButton drawerWhiteContentButton"/>

      <Label text="Close Drawer" tap="{{ closeDrawer }}" class="drawerContentButton drawerWhiteContentButton"/>

    </StackLayout>
  </nsDrawer:RadSideDrawer.drawerContent>
  <nsDrawer:RadSideDrawer.mainContent>
    <StackLayout class="mainContent">
        <Label text="{{ exampleText }}" textWrap="true" class="drawerContentText"/>

        <Button text="OPEN DRAWER" tap="{{ onOpenDrawerTap }}" class="drawerContentButton"/>

        <Button text="GO TO NEXT PAGE" tap="{{ goToSecondPage }}" class="drawerContentButton"/>

    </StackLayout>
  </nsDrawer:RadSideDrawer.mainContent>
</nsDrawer:RadSideDrawer> 

Figure 1. RadSideDrawer over navigation bar (ActionBar)

NativeScriptUI-Getting-Started-iOS NativeScriptUI-Getting-Started-Android

Migrating from DrawerPage (versions 1.x.x) to the latest version

The migration process from versions 1.x.x to the latest version of the "Show over navigation bar" feature is a very straight forward approach. You have to do the following:

  • Change all the dpg:DrawerPage references in your project to the standard Page
  • Move the RadSideDrawer from the dpg:DrawerPage.sideDrawer to the content of the Page, more details here
  • Move the DrawerPage's content to the mainContent of the RadSideDrawer
  • Finally set the showOverNavigation property of the RadSideDrawer to true

References

Want to see this scenario in action?
Check our SDK examples repository on GitHub. You will find this and a lot more practical examples with NativeScript UI.

Related articles you might find useful: