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 Binds a click event at overlay and closes the drawer.
data-overlay boolean true Sets the drawer overlay when the drawer is opened.
data-drawer-target String ".ui-page" Sets 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.

 
isOpen (  )

Checks the drawer status.

 
open (  )

Opens the drawer.
close

Closes the drawer.

close ( )

Return value:

No return value

Code example:

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

Checks the drawer status.

isOpen ( )

Return value:

The boolean value that indicates whether the drawer is open.

Code example:

 
<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>
<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 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>
<script>
   var drawerElement = document.getElementById("leftdrawer"),
       drawer = tau.widget.Drawer(drawerElement);
   drawer.open();
</script>