Tabris.js Widgets: Drawer

A Drawer is a partial content view that slides out from the side of the screen. It can be expanded by swiping left to right, and hidden again when it’s no longer needed. The Gmail app, for example, uses a Drawer to house its navigation menu.

The Drawer class extends the ContentView class. Along with the ContentView, the Drawer is instantiated by Tabris when it starts up; it is auto-initialized. As third party developers, we cannot call new Drawer() to create a Drawer in our code. It has already been created, though by default it is disabled and hidden.

We can think of ContentView and Drawer as the most fundamental building blocks of an app that Tabris has already set up for us. Both are root widgets; they are the base container for all other UI elements and cannot be deleted.

Once importing the drawer

We enable it

Now we can open and close the drawer. The drawer’s default behavior is to open when the user swipes from left to right, and close when the user swipes right to left or taps on content layers behind it. We can also control the drawer programmatically with its close() and open() methods. For example, we can call drawer.open() when a user taps on a hamburger icon, just like in the Gmail app.

The example in the Tabris developer playground shows how to build a sidebar navigation Drawer. In this example, pages are appended to a NavigationView that is added to the contentView. For each page, an element is added to the Drawer. When these elements are tapped, the page corresponding to that element appears in the contentView.

A sidebar navigation menu is the most frequent use case for a Drawer. However, it is not restricted to this. As a composite element, any other widget can be added or appended to it. It can contain whatever your app needs.

The Tabris Developer App makes interesting use of the Drawer element. This expandable space is used as a console for the current script.

There are also various event listeners bound to the Drawer. These fire whenever the drawer has fully opened onOpen, fully closed onClose, and whenever the Drawer toggles between enabled or disabled (in this case the new value of the enabled property is passed to a callback function). See the documentation for more details.