A drawer is a view container that is located off the left or right side of the app view, and can revealed either by swiping across the screen or using the Supersonic API. The most common use case for a drawer is a side-menu: it is hidden by default and can be pulled into view when it is required, for e.g. navigating to another view. The drawer view can display HTML content just like any regular view. The Supersonic drawer responds to touch gestures just like a native drawer, so the opening gesture can be reversed or canceled at any point.
Drawers can be defined before app startup in the
/config/structure.coffee file. To enable a drawer, you define a
drawers object. The
drawers object has three possible properties:
left for defining the left drawer,
right for defining the right drawer and
options for defining shared drawer configurations, such as the animation to use when displaying drawers. Defining a left drawer would look like the following:
drawers: left: id: "leftDrawer" location: "example#drawer" showOnAppLoad: false options: animation: "swingingDoor"
right properties define the respective drawers themselves, and contain three properties,
id property can be used to set an id for your drawer. Because drawers are just like any other WebViews, you can use the defined id to reference your drawer view from other code.
location property determines where your tab points to, and supports two kinds of syntax. In a default Supersonic app the syntax
<module-name>#<view-name> works. In the above code example the defined drawer will render the contents of the
drawer.html page in the
example module. You can also use direct urls if need be:
drawers: left: id: "leftDrawer" location: "http://localhost/app/example/drawer.html" showOnAppLoad: false
showOnAppLoad property determines whether your drawer should be visible on screen when the app starts. This can be used e.g. to create a fixed side-menu for your app.
supersonic.ui.drawers.* namespace. See the available methods on the supersonic.ui.drawers API docs page