Drawer

The drawer component allows you to open and close a drawer to show or hide the content inside it.

Note
This component is supported since Tizen 2.3.

Table of Contents

  1. Default Selector
  2. HTML Examples
  3. Options
  4. Methods

Default Selector

By default, all <div> elements with the class="ui-drawer" or data-role="drawer" attribute are displayed as drawers.

HTML Examples

To create a drawer using the class attribute, use the following code:

<div class="ui-drawer" data-position="left" id="leftdrawer">
   <ul class="ui-listview">
      <li class="ui-drawer-main-list"><a href="#">List item 1</a></li>
      <li class="ui-drawer-main-list"><a href="#">List item 2</a></li>
      <li class="ui-drawer-sub-list"><a href="#">Sub item 1</a></li>
   </ul>
</div>

Options

Summary

Option Input type Default value Description
data-duration number 300 Drawer duration in milliseconds.
data-position string "left" Drawer position.
data-width number 240 Drawer width in pixels.
data-close-on-click boolean true Bind a click event at overlay and close the drawer.
data-overlay boolean true Set the drawer overlay when the drawer is opened.
data-drawer-target String ".ui-page" Set drawer target element as the css selector.

Drawer Position

You can set the drawer position manually with the data-position attribute:

<div class="ui-drawer" data-position="left" id="leftdrawer">

The possible values for the attribute are:

  • "left": Drawer appears from the left side.
  • "right": Drawer appears from the right side.

Methods

Summary

Method Description 
close()

Closes the drawer.

 
boolean isOpen()

Checks the drawer status.

 
open()

Opens the drawer.
close

Closes the drawer.

close()

Return value:

No return value

Code example:

HTML code:

<div class="ui-drawer" data-position="left" id="leftdrawer">
   <ul class="ui-listview">
      <li class="ui-drawer-main-list"><a href="#">List item 1</a></li>
      <li class="ui-drawer-main-list"><a href="#">List item 2</a></li>
      <li class="ui-drawer-sub-list"><a href="#">Sub item 1</a></li>
   </ul>
</div>

JS code:

var drawerElement = document.getElementById("leftdrawer"),
    drawer = tau.widget.Drawer(drawerElement);

drawer.close();
isOpen

Checks the drawer status.

boolean isOpen()

Return value:

Type Description
Boolean Drawer status

Code example:

HTML code:

<div class="ui-drawer" data-position="left" id="leftdrawer">
   <ul class="ui-listview">
      <li class="ui-drawer-main-list"><a href="#">List item 1</a></li>
      <li class="ui-drawer-main-list"><a href="#">List item 2</a></li>
      <li class="ui-drawer-sub-list"><a href="#">Sub item 1</a></li>
   </ul>
</div>

JS code:

var drawerElement = document.getElementById("leftdrawer"),
    drawer = tau.widget.Drawer(drawerElement),

isOpen = drawer.isOpen();
open

Opens the drawer.

open()

Return value:

No return value

Code example:

HTML code:

<div class="ui-drawer" data-position="left" id="leftdrawer">
   <ul class="ui-listview">
      <li class="ui-drawer-main-list"><a href="#">List item 1</a></li>
      <li class="ui-drawer-main-list"><a href="#">List item 2</a></li>
      <li class="ui-drawer-sub-list"><a href="#">Sub item 1</a></li>
   </ul>
</div>

JS code:

var drawerElement = document.getElementById("leftdrawer"),
    drawer = tau.widget.Drawer(drawerElement);

drawer.open();