Using Cross Platform Native SideDrawer component in NativeScript

By
Valio Stoychev



Yes - the meme above sums it all. You asked a lot about a cross-platform native SideDrawer component and I’m happy that we just delivered it with the massive 1.2 release several weeks ago.

I’m sure this is not a news for you, but I like the new component so much that I wanted to do a deep dive and show all the features, transitions and extensibility points we added to it.

SideDrawer is a good example of a cross-platform UI component. It is using the best of the iOS and Android patterns and gives you the full power of the native APIs to set the look and feel you and your designers need for the application. You know we have been building NativeScript for a long time now and it is an extreme pleasure to be able to keep our initial promise - e.g. building apps with JavaScript with the best possible native user experience.

The component is free and is part of the Telerik UI for NativeScript suite. You can install it using our plugins infrastructure. The plugin is hosted on npmjs - https://www.npmjs.com/package/nativescript-telerik-ui

First of all this is a cross-platform component and you can use in the following simple way from your page declaration:

<drawer:SideDrawer id="drawer1">
   <drawer:SideDrawer.mainContent>
 
    <!-- Place your page content here -->
       <StackLayout>
        <Button tap="openDrawer" text="ToggleDrawer"/>
       </StackLayout>
   </drawer:SideDrawer.mainContent>
 
   <drawer:SideDrawer.drawerContent>
     <StackLayout cssClass="drawerContent">
       <StackLayout cssClass="headerContent">
         <Label text="Drawer Header"/>
       </StackLayout>
 
       <StackLayout cssClass="drawerMenuContent">
         <Label text="Item 1"/>
         <Label text="Item 2"/>
         <Label text="Item 3"/>
         <Label text="Item 4"/>
       </StackLayout>
 
     </StackLayout>
   </drawer:SideDrawer.drawerContent>
</drawer:SideDrawer>

This will render the SideDrawer like that:
sd1

 

SideDrawer is page-level component, no app-level one

The second important thing you need to know about the SideDrawer is that it is a page-level component, not an app-level one. This is implemented on purpose because according to the UX patterns in the platforms you can have the following use cases:

  • different SideDrawer content in different pages
  • pages without SideDrawer component at all

That is why the SideDrawer component is not an app-level component. However in reality in most of the cases the scenario is that you will have one and the same SideDrawer component on many pages inside your application.

Reusing SideDrawer declaration across pages

To avoid declaring one and the same content over and over again on many pages you can make a custom reusable component which you will declare it on each of these pages. This gives you an option to change the SideDrawer behaviour and content from one central place. Here is the code:

<drawer:SideDrawer id="drawer1">
   <drawer:SideDrawer.mainContent>
 
    <!-- Place your page content here -->
       <StackLayout>
        <Button tap="openDrawer" text="ToggleDrawer"/>
       </StackLayout>
   </drawer:SideDrawer.mainContent>
 
   <drawer:SideDrawer.drawerContent>
     <sharedContent:DrawerContent />
   </drawer:SideDrawer.drawerContent>
 
</drawer:SideDrawer>

SideDrawer can open from any side of the screen

Now let’s deep dive on the features we implemented inside the SideDrawer. Many would think that you can show the SideDrawer component only from the left side of the screen. You were wrong! you can show it from any side of the screen you like - top, bottom, left or right. This makes the component especially useful when you want to display a “menu”-like interface for your users. See the screenshots below.

<drawer:SideDrawer id="drawer1" drawerLocation="Bottom">

Did I mention that you as a developer you have the power to open the SideDrawer at any time? It is not limited only to user input. You can attach to any event and open the SideDrawer programmatically. This open a nice scenario to use the SideDrawer component as a menu when displaying it from top or from below on a button click. See this in action here:

 

sd2

 

Transitions

I left this as a last item, because I think the real cherry on the cake are the supported transitions. I say transitions, not animations, because you can actually control two things with the predefined transitions:

  • specify the open/close animation of the SideDrawer
  • specify how the SideDrawer manipulates the page content while opening

See the transitions here in action:


 

Sample Code and Documentation

The component is still in preview state but you can see the Telerik UI for NativeScript samples code and the documentation here.

I think this sums it all and I believe you should be happy with what we delivered. Please feel free to share your feedback in the comments below - positive or negative. The team put a lot of effort delivering this component and will be happy to hear from you.


Share this article

Comments


Comments are disabled in preview mode.

Stay connected with NativeScript

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© 2016 Progress Software Corporation. All Rights Reserved.