Wearable Drawer component provides drawer UX in wearable device.
The drawer component is a panel that the application's sub layout on the left or right edge of the screen.
This component is hidden most of the time, but user can be opened as swipe gesture from the edge of the screen or click the element that is added event handler, handler has drawer.open() method.
Note |
---|
This component is supported since 2.3. |
We recommend you to make a handler element. Because if you don't set the handler, handler is set to page element automatically.
Nevertheless, if you really want to make the page element as handler, you should be careful of data-drag-edge or dragEdge option value. Because default value of data-drag-edge or dragEdge option is set to '1' - which means that the whole area of page element becomes drawable handler. |
To use Drawer component in your app, you need to declare "Drawer Handler(such as button)" and "Drawer Body(component)".
Please refer following example.
Note |
---|
If you used the drawer handler, you must implement style code of handler. We don't provide default handler style as framework level, but we provide custom style example in 'style.css'. |
<div id="moreoptionsPage" class="ui-page"> <header class="ui-header ui-has-more"> <h2 class="ui-title">Drawer</h2> <button class="ui-more ui-icon-overflow">Drawer</button> </header> <div class="ui-content content-padding"> Drawer </div> <!-- Circle Profile --> <div id="moreoptionsDrawer" class="ui-drawer" data-drawer-target="#moretionsPage" data-position="right" data-enable="true" data-drag-edge="1"> <div id="moreoptionsSectionChanger" class="ui-section-changer"> <div> <seciont> <button class="option-button">1</button> </seciont> <seciont> <button class="option-button">2</button> </seciont> <seciont> <button class="option-button">3</button> </seciont> </div> </div> </div> </div>
(function(){ var page = document.querySelector("#moreoptionsPage"), popup = page.querySelector("#moreoptionsPopup"), drawer = page.querySelector("#moreoptionsDrawer"), handler = page.querySelector(".ui-more"); page.addEventListener( "pagebeforeshow", function() { var popupWidget; tau.helper.DrawerMoreStyle.create(drawer, { handler: ".ui-more", }); }); })();
#moreoptionsDrawer { display: none; } @media all and (-tizen-geometric-shape: circle) { #moreoptionsDrawer { display: block; background-color: rgba(255, 255, 255, 0.1); border-radius: 100%; } #moreoptionsPopup { display: none; } .sections, .options { text-align: center; } .option-button { width: 158px; height: 158px; background-color: #a4a4a4; position: relative; left: 50%; transform: translate3d(-50%, -50%, 0); top: 50%; border-radius: 50%; border: none; text-align: center; line-height: 158px; -webkit-appearance: none; } }
Option | Input type | Default value | Description |
---|---|---|---|
drawerTarget | string | ".ui-page" | Drawer appended target. Value type is CSS selector type. |
position | "left" | "right" | "left" | Set the drawer position. If you set the value is "left", drawer appear from left side. If you set the value is "right", drawer appear from right side. |
enable | boolean | true | Enable drawer component. |
dragEdge | number | 1 |
Set the area on TARGET element to activate the drawer component. The value is based on ratio, so you should set the value between 0.0 and 1.0. This area has dependency on the position value such as 'right' or 'left'. For example, if you set the value to '0.5' and position was set to 'left', the area to activate the drawer component is set to the left half side of the TARGET element. If you don't set the handler, TARGET element is set to the element which is selected as Target option value. However, if you set the handler, this option value is set to '1'. |
<div class="ui-drawer" data-position="left" id="leftdrawer">
<div class="ui-drawer" data-drawer-target="#drawerPage">
<div class="ui-drawer" data-enable="true">
<div class="ui-drawer" data-drag-edge="1">
Name | Description |
---|---|
draweropen | Triggered when the drawer opened. |
drawerclose | Triggered when the drawer closed. |
Drawer has four state type.
You can get those states from getState() method.
Method | Description |
---|---|
setDragHandler ( Element element ) |
Set Drawer drag handler. |
transition ( Integer position ) |
Transition Drawer widget. |
open ( ) |
Open Drawer widget. |
close ( ) |
Close Drawer widget. |
String getState ( ) |
Get state of Drawer widget. |
setDragHandler
Set Drawer drag handler.
If developer use handler, drag event is bound at handler only.
setDragHandler ( Element element)
<!-- Drawer Handlers --> <a id="leftDrawerHandler" href="#leftDrawer" class="drawer-handler">Left Handler</a> <div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left" data-enable="true" data-drag-edge="1"> <header class="ui-header"> <h2 class="ui-title">Left Drawer</h2> </header> <div id="leftClose" class="ui-content"> <p>Click Close</p> </div> </div> <script> var handler = document.getElementById("leftDrawerHandler"), drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href")); drawer.setDragHandler(handler); </script>
Parameters:
Parameter | Type | Required / optional | Default value | Description |
---|---|---|---|---|
element | Element | required |
Return value:
No Return Valuetransition
Transition Drawer widget.
This method use only positive integer number.
transition ( Integer position)
<a id="leftDrawerHandler" href="#leftDrawer" class="drawer-handler">Left Handler</a> <div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left" data-enable="true" data-drag-edge="1"> <header class="ui-header"> <h2 class="ui-title">Left Drawer</h2> </header> <div id="leftClose" class="ui-content"> <p>Click Close</p> </div> </div> <script> var handler = document.getElementById("leftDrawerHandler"), drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href")); drawer.Transition(60); </script>
Parameters:
Parameter | Type | Required / optional | Default value | Description |
---|---|---|---|---|
position | Integer | required |
Return value:
No Return Valueopen
Open Drawer widget.
open ( )
<!-- Drawer Handlers --> <div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left" data-enable="true" data-drag-edge="1"> <header class="ui-header"> <h2 class="ui-title">Left Drawer</h2> </header> <div id="leftClose" class="ui-content"> <p>Click Close</p> </div> </div> <script> var handler = document.getElementById("leftDrawerHandler"), drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href")); drawer.open(); </script>
Return value:
No Return Valueclose
Close Drawer widget.
close ( )
<!-- Drawer Handlers --> <div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left" data-enable="true" data-drag-edge="1"> <header class="ui-header"> <h2 class="ui-title">Left Drawer</h2> </header> <div id="leftClose" class="ui-content"> <p>Click Close</p> </div> </div> <script> var handler = document.getElementById("leftDrawerHandler"), drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href")); drawer.close(); </script>
Return value:
No Return ValuegetState
Get state of Drawer widget.
String getState ( )
<!-- Drawer Handlers --> <div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left" data-enable="true" data-drag-edge="1"> <header class="ui-header"> <h2 class="ui-title">Left Drawer</h2> </header> <div id="leftClose" class="ui-content"> <p>Click Close</p> </div> </div> <script> var handler = document.getElementById("leftDrawerHandler"), drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href")), state; state = drawer.getState(); </script>
Return value:
Type | Description |
---|---|
String | Drawer state {"closed"|"opened"|"sliding"|"settling"} |