How to set the width of the side-drawer?

5 posts, 0 answers
  1. dash
    dash avatar
    16 posts
    Member since:
    Nov 2016

    Posted 22 Nov 2016 Link to this post

    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.

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    122 posts

    Posted 23 Nov 2016 Link to this post

    Hello,
    Thank you for your interest in UI for NativeScript.
    To be able to set custom 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 convenience 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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. dash
    dash avatar
    16 posts
    Member since:
    Nov 2016

    Posted 23 Nov 2016 in reply to nikolay.tsonev Link to this post

    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.

  4. dash
    dash avatar
    16 posts
    Member since:
    Nov 2016

    Posted 23 Nov 2016 in reply to dash Link to this post

    Oops forgot a question - in the first code sample above - what's the purpose of RadSideDrawer.mainContent
  5. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    122 posts

    Posted 23 Nov 2016 Link to this post

    Hello,
    The purpose of the of the mainContent tag is to be able to specify, which part of your code will be displayed in 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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top