• Home
• Felgo
• AppDrawer

AppDrawer

A drawer opened from the left or right edge of the screen with custom content. More...

• List of all members, including inherited members

Properties

• contentItems : list<Item>
• drawerPosition : int
• isOpen : bool
• keepOpen : bool
• minified : bool
• minifyEnabled : bool
• openAtStart : bool
• overlayHidden : bool
• slideInDist : real

Signals

• closing()
• opening()

Methods

• bool close()
• bool open()
• void toggle()

Detailed Description

This is a customizable container which can be slided in from the edge of the screen. It can host any QML items as children.

The AppDrawer should be placed inside a screen-filling container. It always has the same height as its parent. The width of the drawer is 240dp per default and can be changed manually. It should not be too small or too large, probably somewhere between 25% and 75% of the width of its parent view.

Example Code

To include an AppDrawer for arbitrary content in your application, the following code can be used. If the drawer should be used for navigating between pages, consider using Navigation instead.

 AppPage {
   AppDrawer {
     //all items inside AppDrawer will be placed in the drawer area

     id: drawer

     z: 1 //put drawer on top of other content

     Rectangle { //background for drawer
       anchors.fill: parent
       color: "white"
     }

     AppButton {
       anchors.centerIn: parent
       text: "Test"
       onClicked: {
         testTxt.text = "Button in drawer Clicked"
         drawer.close()
       }
     }
   } //end of AppDrawer

   AppText {
     id: testTxt
     anchors.centerIn: parent
     font.pixelSize: sp(18)
     text: "Swipe from left to open drawer"
   }

   AppButton {
     text: "Open drawer manually"
     anchors.top: testTxt.bottom
     anchors.horizontalCenter: parent.horizontalCenter
     onClicked: drawer.open()
   }
 }

Property Documentation

Signal Documentation

Method Documentation