[TAU] How to create the 2btn-popup using TAU in Gear S2?
By Seoghyun Kang
■ Precondition
1. Create the UIComponent Project
2. Move the image (tw_ic_popup_btn_check.png/tw_ic_popup_btn_delete.png) from UIComponent(/contents/popup/images) to your project.
3. Move the TAU library from UIComponent(/lib) to your project
[Warning] This way can be changed.
1. Create the UIComponent Project
2. Move the image (tw_ic_popup_btn_check.png/tw_ic_popup_btn_delete.png) from UIComponent(/contents/popup/images) to your project.
3. Move the TAU library from UIComponent(/lib) to your project
[Warning] This way can be changed.
// [Warning] This way can be changed. This way is using TAU (0.10.29-9)
/*************************************
* HTML File
**************************************/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="popupPage" class="ui-page">
<header class="ui-header">
<h2 class="ui-title">Popup</h2>
</header>
<div class="ui-content">
<ul class="ui-listview">
<li><a href="#btnPopup" data-rel="popup">Show the popup</a></li>
</ul>
</div>
<div id="btnPopup" class="ui-popup">
<div class="ui-popup-content">
Popup Sample Code for the circle UI
</div>
<div class="ui-popup-footer ui-side-button ui-grid-col-2">
<a href="#" class="ui-btn btn-icon-cancel" data-rel="back">Cancel</a>
<a href="#" class="ui-btn btn-icon-check" data-rel="back">OK</a>
</div>
</div>
</div>
<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
</body>
</html>
/*************************************
* CSS File
**************************************/
.btn-icon-check::before {
background-color: rgba(0, 149, 255, 1);
-webkit-mask-image: url(../img/tw_ic_popup_btn_check.png);
}
.btn-icon-cancel::before {
background-color: rgba(0, 149, 255, 1);
-webkit-mask-image: url(../img/tw_ic_popup_btn_delete.png);
}