Namespace Detail


Drawers are container widgets that can be "open", allowing child content to be displayed normally, or "closed", keeping it out of view. The open state of the drawer depends on a single model property, although there are also widget APIs available for manually opening and closing a drawer. It should be noted that although these APIs modify the 'open' model property, they do not send Mojo.Event.propertyChange events, but use the standard DOM click event instead.


<div x-mojo-element="Drawer" id="drawerId" class="drawerClass" name="drawerName"></div> 

Properties Required Value Description
x-mojo-element Required "Drawer" Declares the widget as type 'Drawer'.
id Required Any String Identifies the widget element for use when instantiating or rendering.


The Drawer widget generates no events.


  this.attributes = {
      modelProperty: 'open',
      unstyled: false
  this.model = {
      open: true

Attribute Properties

Attribute Property Type Required Default Description
modelProperty String Optional open Name of model property to hold the drawer's open state.
unstyled Boolean Optional false Prevents styles from being added, allowing the Drawer to be used just for open/close functionality; drawer contents will always be moved into a Drawer structure and positioned relatively.
drawerBottomOffset Number Optional 0 Defines the min bottom offset for the drawer widget when opening if the size is less than the screen size.
drawerOpenerOffset Number Optional row-height Defines the size of the opener of the drawer widget so that the opener may be displayed when auto-scrolling when opening.

Model Properties

Model Property Type Required Default Description
open Boolean Required true Initial Drawer state and toggled with each click


To invoke a method on a widget, use the scene controller's get method for the desired widget, and append mojo followed by the method.



Method Arguments Description
setOpenState open Sets the open state to open or closed.
getOpenState none Returns current value of open state.
toggleState none Changes the drawer's open state to the opposite of what it is now.