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 data-role="drawer" attribute are displayed as drawers.

HTML Examples

To create a drawer using the data-role attribute, use the following code:

<div data-role="drawer" data-position="left" id="leftdrawer">
   <ul data-role="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 100 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.

Drawer Position

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

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

The possible values for the attribute are:

Drawer Inner List

The drawer supports 2 inner list styles: main list style and sub-list style. You can set the list style by specifying a class for each inner list item:

Methods

Summary

Method Description
close (  ) 

Closes the drawer.

isOpen (  ) 

Checks the drawer status.

open (  ) 

Opens the drawer.

close

Closes the drawer.

close ( ) 

Return value:

No return value

Code example:

<div data-role="drawer" data-position="left" id="leftdrawer">
   <ul data-role="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>
<script>
   var drawerElement = document.getElementById("leftdrawer"),
       drawer = tau.widget.Drawer(drawerElement);
   drawer.close();
</script>
isOpen

Checks the drawer status.

isOpen ( ) 

Return value:

boolean value

Code example:

<div data-role="drawer" data-position="left" id="leftdrawer">
   <ul data-role="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>
<script>
   var drawerElement = document.getElementById("leftdrawer"),
       drawer = tau.widget.Drawer(drawerElement),
       isOpen = drawer.isOpen();
</script>
open

Opens the drawer.

open ( ) 

Return value:

No return value

Code example:

<div data-role="drawer" data-position="left" id="leftdrawer">
   <ul data-role="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>
<script>
   var drawerElement = document.getElementById("leftdrawer"),
       drawer = tau.widget.Drawer(drawerElement);
   drawer.open();
</script>