# Mojo.Widget.Drawer

## Namespace Detail

### Overview

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.

### Declaration

>     <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.

### Events

The Drawer widget generates no events.

### Instantiation

>     this.controller.setupWidget("drawerId",
>       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

### Methods

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.

Example:

>     this.controller.get('myWidget').mojo.getValue()

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.