How to set the width of the side-drawer?

[dash]

How to set the width of the side-drawer?

By default the sidedrawer takes up the full width - can I set the width to a certain percentage.

 

Thanks.

[Nikolay Tsonev]

Hello,
Thank you for your interest in UI for NativeScript.
To be able to set width of the component, you could use RadSideDrawer's drawerContentSize property. This will help you to specify different from the default one width.You could review all available SideDrawer properties here. For you I am also attaching sample code.

main-page.xml

<dpg:DrawerPage.sideDrawer>
        <drawer:RadSideDrawer id="sideDrawer"  drawerContentSize="150">
          <drawer:RadSideDrawer.drawerContent>
            <StackLayout cssClass="drawerContent">
              <StackLayout cssClass="headerContent">
                <Label text="Navigation Menu"/>
              </StackLayout>
              <StackLayout cssClass="drawerMenuContent">
                <Label text="Primary" cssClass="drawerSectionHeader" />
                <Label text="Social" cssClass="drawerSectionItem" />
                <Label text="Promotions" cssClass="drawerSectionItem" />
                <Label text="Labels" cssClass="drawerSectionHeader" />
                <Label text="Important" cssClass="drawerSectionItem" />
                <Label text="Starred" cssClass="drawerSectionItem" />
                <Label text="Sent Mail" cssClass="drawerSectionItem" />
                <Label text="Drafts" cssClass="drawerSectionItem" />
              </StackLayout>
              <Button text="Close Drawer" tap="{{ onCloseDrawerTap }}"/>
            </StackLayout>
          </drawer:RadSideDrawer.drawerContent>
        </drawer:RadSideDrawer>
    </dpg:DrawerPage.sideDrawer>

Hope this helps.
Regards,
nikolay.tsonev
Telerik by Progress

[dash]

I tried this yesterday and it didn't work.

I think it has to do with how the side-drawer layout is setup...there seems to be some differences in the sample apps out there.

On the Telerik doc site - there's this sample:

<drawer:RadSideDrawer id="sideDrawer">
  <drawer:RadSideDrawer.drawerTransition>
    <drawer:RevealTransition/>
  </drawer:RadSideDrawer.drawerTransition>
  <drawer:RadSideDrawer.mainContent>
  </drawer:RadSideDrawer.mainContent>
  <drawer:RadSideDrawer.drawerContent>
  </drawer:RadSideDrawer.drawerContent>
</drawer:RadSideDrawer>

 

I've got:

sideDrawer
  RadSideDrawer drawerContentSize="150"
    RadSideDrawer.drawerContent
       StackLayout
          StackLayout
              ..header elements
          ScrollView
              StackLayout
                  ..content elements

 

I got above from the nativescript-theme-core demo app.

Should ALL content for the sidedrawer (including header etc) be inside `drawerContent`?

Thanks.

[dash]

Oops forgot a question - in the first code sample above - what's the purpose of RadSideDrawer.mainContent

[Nikolay Tsonev]

Hello,
The purpose of the of the mainContent tag is to be able to specify, which part of your code will be displayed the current page. Between the open and closing RadSideDrawer.mainContent tags, you should display main screen content for the current SideDrawer instance as it has been described in the documentation. I am also attaching sample code.

XML

<dpg:DrawerPage.sideDrawer>
        <drawer:RadSideDrawer id="sideDrawer">
          <drawer:RadSideDrawer.drawerContent>
            <StackLayout cssClass="drawerContent">
              <StackLayout cssClass="headerContent">
                <Label text="Navigation Menu"/>
              </StackLayout>
              <StackLayout cssClass="drawerMenuContent">
                <Label text="Primary" cssClass="drawerSectionHeader" />
                <Label text="Social" cssClass="drawerSectionItem" />
                <Label text="Promotions" cssClass="drawerSectionItem" />
                <Label text="Labels" cssClass="drawerSectionHeader" />
                <Label text="Important" cssClass="drawerSectionItem" />
                <Label text="Starred" cssClass="drawerSectionItem" />
                <Label text="Sent Mail" cssClass="drawerSectionItem" />
                <Label text="Drafts" cssClass="drawerSectionItem" />
              </StackLayout>
              <Button text="Close Drawer" tap="{{ onCloseDrawerTap }}"/>

            </StackLayout>
          </drawer:RadSideDrawer.drawerContent>
       <drawer:RadSideDrawer.mainContent>
       </drawer:RadSideDrawer.mainContent>
        </drawer:RadSideDrawer>
    </dpg:DrawerPage.sideDrawer>

Hope this helps. 

Regards,
nikolay.tsonev
Telerik by Progress

[Sagar]

I tried this and worked fine but if I give 100% it is not working.

I want the side drawer to take whole width without gap in any device. How can I do that then ??

[Nikolay Tsonev]

Hi Sagar,

First of all, thank you for your interest in UI for NativeScript.
we reviewed your case, however at this time percentage values for the drawerContentSize property is not supported. In regard to that, this is already logged in the issue here.
In the meantime, I would suggest to bind this property and to set up its value to be equal to the device window width from code behind. This scenario is demonstrated in the below-attached example.
XML

<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="pageLoaded"
    navigatedTo="onNavigatedTo"
    xmlns:nsDrawer="nativescript-pro-ui/sidedrawer"
    xmlns="http://www.nativescript.org/tns.xsd">
    <navigation.actionBar>
      <ActionBar title="Getting started" />
    </navigation.actionBar>
<!-- >> sidedrawer-getting-started-xml -->
    <nsDrawer:RadSideDrawer id="sideDrawer" drawerContentSize="{{getWindowSize}}">
      <nsDrawer:RadSideDrawer.drawerContent>
        <StackLayout backgroundColor="gray">
          <StackLayout height="56" style="text-align: center; vertical-align: center;">
            <Label text="Navigation Menu"/>
          </StackLayout>
          <StackLayout>
            <Label text="Primary" padding="10" backgroundColor="lightgray"/>
            <Label text="Social" padding="10"/>
            <Label text="Promotions" padding="10" />
            <Label text="Labels" padding="10" backgroundColor="lightgray" />
            <Label text="Important" padding="10" />
            <Label text="Starred" padding="10" />
            <Label text="Sent Mail" padding="10" />
            <Label text="Drafts" padding="10" />
          </StackLayout>
          <Label text="Close Drawer" color="lightgray" padding="10" style="horizontal-align: center" tap="{{ onCloseDrawerTap }}"/>
        </StackLayout>
      </nsDrawer:RadSideDrawer.drawerContent>

      <nsDrawer:RadSideDrawer.mainContent>
        <StackLayout >
          <Label text="{{ mainContentText }}" textWrap="true" fontSize="13" padding="10" />
          <Button text="Open drawer" tap="{{ onOpenDrawerTap }}" margin="10" style="horizontal-align: left" />
        </StackLayout>
      </nsDrawer:RadSideDrawer.mainContent>
    </nsDrawer:RadSideDrawer>
<!-- << sidedrawer-getting-started-xml -->
</navigation:ExamplePage>

TypeScript

import { Page } from "tns-core-modules/ui/page";
import * as platformModule from "tns-core-modules/platform";
import frame = require("tns-core-modules/ui/frame");
import { RadSideDrawer } from "nativescript-pro-ui/sidedrawer";
import { Observable } from "tns-core-modules/data/observable";

export function pageLoaded(args) {
    var page = args.object as Page;
    page.bindingContext = new GettingStartedViewModel();
}
// << sidedrawer-getting-started-binding-context
class GettingStartedViewModel extends Observable {
    constructor() {
        super();
        console.log("width");
        console.log(platformModule.screen.mainScreen.widthDIPs);
        this.set("mainContentText", "SideDrawer for NativeScript can be easily setup in the XML definition of your page by defining main- and drawer-content. The component"
            + " has a default transition and position and also exposes notifications related to changes in its state. Swipe from left to open side drawer.");
            this.set("getWindowSize", platformModule.screen.mainScreen.widthDIPs);
    }

    public onOpenDrawerTap() {
        let sideDrawer: RadSideDrawer = <RadSideDrawer>( frame.topmost().getViewById("sideDrawer"));
        sideDrawer.showDrawer();
    }

    public onCloseDrawerTap() {
        let sideDrawer: RadSideDrawer = <RadSideDrawer>( frame.topmost().getViewById("sideDrawer"));
        sideDrawer.closeDrawer();
    }

}

Hope this helps.
Regards,
nikolay.tsonev
Progress Telerik