SideDrawer display on ios

2 posts, 1 answers
  1. License
    License avatar
    43 posts
    Member since:
    Oct 2016

    Posted 02 Mar Link to this post


    Hello,
      In SideDrawer overview, I found ios displays different from android .Can IOS have the shade to the left part view  like android? 
  2. Answer
    nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    286 posts

    Posted 02 Mar Link to this post

    Hello,
    This behavior has been related to some differences of the both platforms.
    This shade has been shown in Android by default, however, iOS native sideDrawer do not have such a shade, which hovers the Layout. For your help, I have logged a new issue in UI for NativeScript feedback repository. You could keep track on the issue.
    What you could do for iOS is to set additional Layout with rgba backgroundColor, which could be shown, when the drawer has been opened and to hide it when it has been closed.
    For example:

    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>
      </dpg:DrawerPage.sideDrawer>
    <GridLayout rows="*" columns="*">
        <StackLayout row="0" col="0" cssClass="mainContent">
          <Label text="{{ mainContentText }}" textWrap="true" cssClass="drawerContentText"/>
          <Button text="Open drawer" tap="{{ onOpenDrawerTap }}" cssClass="drawerContentButton"/>
          </StackLayout>
        <StackLayout visibility="{{ isItemVisible ? 'visible' : 'collapsed' }}" backgroundColor="rgba(140, 114, 114, 0.5)" row="0" col="0">
             
        </StackLayout>
    </GridLayout>

    Hope this helps.
    Regards,
    nikolay.tsonev
    Telerik by Progress
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top