🤖 Create a chatbot for your NativeScript app! Learn more at our upcoming webinar.

NativeScript Core

RadSideDrawer Location

Depending on the application scenario, RadSideDrawer can be configured to display at a specific location on the screen. This also changes the way the transition animation is applied. Setting the location can be done by setting the drawerLocation property to a value from the SideDrawerLocation enumeration:

Changing the drawer location is done by setting one of the four possible values to the drawerLocation property. The four location options are defined by the SideDrawerLocation enum. Setting the drawerLocation property can be done both programmatically and via XML:

public onTopLocationTap(args) {
    this.setDrawerLocation(drawerModule.SideDrawerLocation.Top);
    this.openDrawer();
}

private setDrawerLocation(location: drawerModule.SideDrawerLocation) {
    let sideDrawer: drawerModule.RadSideDrawer = <drawerModule.RadSideDrawer>(frameModule.topmost().getViewById("sideDrawer"));
    if (!sideDrawer) {
        return;
    }

    if (sideDrawer.android) {
        if (location === drawerModule.SideDrawerLocation.Top || location === drawerModule.SideDrawerLocation.Bottom) {
            sideDrawer.android.setDrawerCloseThreshold(20);
        } else {
            sideDrawer.android.setDrawerCloseThreshold(280);
        }
    }
    sideDrawer.drawerLocation = location;
}
<nsDrawer:RadSideDrawer id="sideDrawer" drawerLocation="Left" drawerContentSize="280">

<nsDrawer:RadSideDrawer.drawerTransition>
  <nsDrawer:RevealTransition/>
</nsDrawer:RadSideDrawer.drawerTransition>

  <nsDrawer:RadSideDrawer.drawerContent>
  </nsDrawer:RadSideDrawer.drawerContent>

  <nsDrawer:RadSideDrawer.mainContent>
    <GridLayout rows="auto, *" class="mainContent">
      <Label text="{{drawerPositionText}}" textWrap="true" class="drawerContentText"/>
      <ScrollView row="1">
        <StackLayout>
            <Button text="Left" tap="{{ onLeftLocationTap }}" class="drawerContentButton"/>
            <Button text="Top" tap="{{ onTopLocationTap }}" class="drawerContentButton"/>
            <Button text="Right" tap="{{ onRightLocationTap }}" class="drawerContentButton"/>
            <Button text="Bottom" tap="{{ onBottomLocationTap }}" class="drawerContentButton"/>
        </StackLayout>
      </ScrollView>
    </GridLayout>
  </nsDrawer:RadSideDrawer.mainContent>
</nsDrawer:RadSideDrawer>

References

Want to see this scenario in action? Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.