Back

addDrawer

JS Py
Hello World
Content:
- Examples ##
- Properties
- Methods

A drawer is a navigation panel that slides in from the edge of the screen, typically from the left, to reveal additional options or content.

drw = ui.addDrawer( layout, options?, width? ) → ui object: Drawer

Here are the available methods of the Drawer Component.

Examples ##

Example - Drawer Implementation

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout( "main", "Linear", "VCenter,FillXY")

        // Add a fixed appbar with menu icon to the main layout.
        this.apb = ui.addAppBar(this.main, "My App", "Menu,Fixed")

        // Add a callback handler for `onMenu` event of the AppBar control.
        this.apb.setOnMenu( this.openDrawer )

        // Add a text control to the main layout.
        ui.addText(this.main, "<---- Swipe left ----->", "Center");

        // Create a linear layout for the drawer.
        this.drawerLay = ui.addLayout(null, "Linear")

        // Initialize the drawer by passing the drawer layout above.
        this.drawer = ui.addDrawer(this.drawerLay, "left", 0.7)

        // Add a callback handler for `onClose` event on the Drawer component.
        this.drawer.setOnClose( this.onClose )

        var lst1 = [
            [ "music_note", "Audios" ],
            [ "movie", "Videos" ],
            [ "insert_drive_file", "Documents" ]
        ]

        // Adds a list to the drawer layout. See List control for customization.
        this.lstMenu1 = ui.addList( this.drawerLay, lst1, "Icon", 1 )
        this.lstMenu1.label = "Main navigation"

        // Add a callback handler for `onSelect` event on the list.
        this.lstMenu1.setOnTouch( this.onSelect )

        // Adds a divider into the drawer layout.
        ui.addDivider( this.drawerLay, 1 )

        var lst2 = [
            [ "mail", "All Mail" ],
            [ "inbox", "Inbox" ],
            [ "drafts", "Outbox" ],
            [ "send", "Sent" ]
        ]

        // Adds another list to the drawer layout. See List control for customization.
        this.lstMenu2 = ui.addList( this.drawerLay, lst2, "Icon", 1 )
        this.lstMenu2.label = "Secondary navigation"
        this.lstMenu2.setOnTouch( this.onSelect )
    }

    openDrawer()
    {
        this.drawer.show()
    }

    onSelect(title)
    {
        this.apb.text = title
        ui.showPopup( title )
        this.drawer.hide()
    }

    onClose()
    {
        ui.showPopup('Drawer is close', "bottom")
    }
}
from hybrid import ui

def OnStart():
            main = ui.addLayout("main", "Linear", "VCenter,FillXY")

            apb = ui.addAppBar(main, "My App", "Menu,Fixed")
            apb.setOnMenu(openDrawer)

            ui.addText(main, "<---- Swipe left ----->", "Center")

            drawerLay = ui.addLayout(None, "Linear")
            drawer = ui.addDrawer(drawerLay, "left", 0.7)
            drawer.setOnClose(onClose)

            lst1 = [
                ["music_note", "Audios"],
                ["movie", "Videos"],
                ["insert_drive_file", "Documents"]
            ]
            lstMenu1 = ui.addList(drawerLay, lst1, "Icon", 1)
            lstMenu1.label = "Main navigation"
            lstMenu1.setOnTouch(onSelect)

            ui.addDivider(drawerLay, 1)

            lst2 = [
                ["mail", "All Mail"],
                ["inbox", "Inbox"],
                ["drafts", "Outbox"],
                ["send", "Sent"]
            ]
            lstMenu2 = ui.addList(drawerLay, lst2, "Icon", 1)
            lstMenu2.label = "Secondary navigation"
            lstMenu2.setOnTouch(onSelect)

        def openDrawer():
            drawer.show()

        def onSelect(
Copy All       Run      

Example - Drawer Anchor Positions

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout( "main", "Linear", "VCenter,FillXY")

        // Adds a select control to the main layout.
        this.sel = ui.addSelect(this.main, ["Left", "Top", "Right", "Bottom"], "Radio,Outlined", 0.7)
        this.sel.label = "Select anchor position"

        // Add a callback handler for `onChange` event of the select control.
        this.sel.setOnChange(this.onSelect)

        // Creates a linear layout for the drawer.
        this.drawerLay = ui.addLayout( null, "Linear" )

        // Initialize the drawer by passing the drawer layout.
        this.drawer = ui.addDrawer( this.drawerLay, "left" )

        var lst1 = [
            [ "music_note", "Audios" ],
            [ "movie", "Videos" ],
            [ "insert_drive_file", "Documents" ]
        ]

        // Adds a list to the drawer layout.
        this.lstMenu1 = ui.addList( this.drawerLay, lst1, "Icon", 1 )
        this.lstMenu1.setOnTouch( this.closeDrawer )
        this.lstMenu1.label = "Main navigation"

        // Adds a divider into the drawer layout.
        ui.addDivider( this.drawerLay, 1 )

        var lst2 = [
            [ "mail", "All Mail" ],
            [ "inbox", "Inbox" ],
            [ "drafts", "Outbox" ],
            [ "send", "Sent" ]
        ]

        // Adds another list to the drawer layout.
        this.lstMenu2 = ui.addList( this.drawerLay, lst2, "Icon", 1 )
        this.lstMenu2.label = "Secondary navigation"
        this.lstMenu2.setOnTouch( this.closeDrawer )
    }

    openDrawer()
    {
        this.drawer.show()
    }

    closeDrawer( title )
    {
        ui.showPopup( title )
        this.drawer.hide()
    }

    onSelect( value )
    {
        // Set the drawer anchor first
        this.drawer.anchor = value

        // Set the drawer width depending on anchor position
        if(value == "Top" || value == "Bottom") {
            this.drawer.width = 0.5
        } else {
            this.drawer.width = 0.7
        }

        // Open the drawer
        this.drawer.show()
    }
}
class Main extends App
    onStart()
        # Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout( "main", "Linear", "VCenter,FillXY")

        # Adds a select control to the main layout.
        this.sel = ui.addSelect(this.main, ["Left", "Top", "Right", "Bottom"], "Radio,Outlined", 0.7)
        this.sel.label = "Select anchor position"

        # Add a callback handler for `onChange` event of the select control.
        this.sel.setOnChange(this.onSelect)

        # Creates a linear layout for the drawer.
        this.drawerLay = ui.addLayout( null, "Linear" )

        # Initialize the drawer by passing the drawer layout.
        this.drawer = ui.addDrawer( this.drawerLay, "left" )

        lst1 = [
            [ "music_note", "Audios" ],
            [ "movie", "Videos" ],
            [ "insert_drive_file", "Documents" ]
        ]

        # Adds a list to the drawer layout.
        this.lstMenu1 = ui.addList( this.drawerLay, lst1, "Icon", 1 )
        this.lstMenu1.setOnTouch( this.closeDrawer )
        this.lstMenu1.label = "Main navigation"

        # Adds a divider into the drawer layout.
        ui.addDivider( this.drawerLay, 1 )

        lst2 = [
            [ "mail", "All Mail" ],
            [ "inbox", "Inbox" ],
            [ "drafts", "Outbox" ],
            [ "send", "Sent" ]
        ]

        # Adds another list to the drawer layout.
        this.lstMenu2 = ui.addList( this.drawerLay, lst2, "Icon", 1 )
        this.lstMenu2.label = "Secondary navigation"
        this.lstMenu2.setOnTouch( this.closeDrawer )

    openDrawer()
        this.drawer.show()

    closeDrawer( title )
        ui.showPopup( title )
        this.drawer.hide()

    onSelect( value )
        # Set the drawer anchor first
        this.drawer.anchor = value

        # Set the drawer width depending on anchor position
        if value == "Top" || value == "Bottom":
            this.drawer.width = 0.5else
            this.drawer.width = 0.7

        # Open the drawer
        this.drawer.show()
Copy All       Run      

Properties

The following properties are available on the Drawer object:

anchor → String
disabled → Boolean
swipeAreaWidth → Number
width → Number

Methods

The following methods are available on the Drawer object:

addLayout( lay )
disableBackdropTransition( value )
disableDiscovery( value )
disableSwipeToOpen( value )
hide()
setOnClose( callback )
setOnOpen( callback )
show( anchor='left' )
Boolean: Values can be `true` or `false`.
Number: Fraction of the screen width starting from the anchor position `[0-1]`.
String: “A comma separated options.nVariant: `Permanent`”, “ `Persistent`”, “ `Temporary`
Anchor: `Left`”, “ `Right`”, “ `Top`”, “ `Bottom`”
String: “Optional. The anchor position. Can be `left`”, “ `top`”, “ `right`”, “ `bottom`. Default is `left`.”
Object: The drawer layout where to add controls.
Object: Layout component.
function()
drw.addLayout
Adds a layout into the drawer.
drw.anchor
Sets or returns the anchor position of the drawer. Values can be left, top, right, bottom.
drw.disableBackdropTransition
Disable the backdrop transition. This can improve the FPS on low-end devices.
drw.disabled
Sets or returns the disabled state of the drawer.
drw.disableDiscovery
If true, touching the screen near the edge of the drawer will not slide in the drawer a bit to promote accidental discovery of the swipe gesture.
drw.disableSwipeToOpen
Disable swipe to open feature of the drawer. You can use this especially for ios devices which has swipe to go back feature.
drw.hide
Close the drawer dynamically.
drw.setOnClose
Adds a callback function when the drawer is closed.
drw.setOnOpen
Adds a callback function when the drawer is opened via swiping from the anchor position.
drw.show
Open the drawer dynamically.
drw.swipeAreaWidth
Sets or returns the width of the swipeable area of the Drawer.
drw.width
Sets or returns the width of the drawer as a fraction of the screen viewport relative to its anchor position [0-1].