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. |
By default, all <div>
elements with the data-role="drawer"
attribute are displayed as drawers.
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>
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. |
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:
"left"
: Drawer appears from the left side."right"
: Drawer appears from the right side.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:
"ui-drawer-main-list"
: Main list style."ui-drawer-sub-list"
: Sub-list style.Method | Description |
---|---|
close ( ) |
Closes the drawer. |
isOpen ( ) |
Checks the drawer status. |
open ( ) |
Opens the drawer. |
close
Closes the drawer.
close ( )
Return value:
No return valueCode 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 valueCode 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 valueCode 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>