Swipe List

The swipe list component shows on the screen a list where you can swipe horizontally through a list item to activate a specific feature or perform a specific task.

For example, you can swipe a contact in a contact list to call them or to open a message editor in order to write them a message.

You can set the details when swiping such as elements that appear, background color and the property of the animation.

Note
This component is released for 2.3 rectangular UI.
When you create this component in round screen, layout can be shown broken because screen hide swipe widget.

Table of Contents

  1. How to Create Swipe List
  2. Options
  3. Events

How to Create Swipe List

In the following, left swipe shows "Calling" text and right swipe shows "Message" on the list item.

HTML

<div class="ui-page" id="pageSwipeList">
   <div class="ui-content">
      <!--List items that can be swiped-->
      <ul class="ui-listview ui-swipelist-list">
         <li>Andrew</li>
         <li>Bill</li>
         <li>Christina</li>
         <li>Daniel</li>
         <li>Edward</li>
         <li>Peter</li>
         <li>Sam</li>
         <li>Tom</li>
      </ul>
      <!--Swipe actions-->
      <div class="ui-swipelist">
         <div class="ui-swipelist-left">
            <div class="ui-swipelist-icon"></div>
            <div class="ui-swipelist-text">Calling</div>
         </div>
         <div class="ui-swipelist-right">
            <div class="ui-swipelist-icon"></div>
            <div class="ui-swipelist-text">Message</div>
         </div>
      </div>
   </div>
</div>

JavaScript

(function() {
   var page = document.getElementById("pageSwipeList"),
       listElement = page.getElementsByClassName("ui-swipelist-list")[0],
       swipeList;
   page.addEventListener("pageshow", function() {
      /* Make swipe list object */
      swipeList = new tau.widget.SwipeList(listElement, {
         swipeTarget: "li",
         swipeElement: ".ui-swipelist"
      });
   });
   page.addEventListener("pagehide", function() {
      /* Release object */
      swipeList.destroy();
   });
})();

Options

The following table describes the supported swipe list options.

Option Type Description
swipeTarget String Swipe list selector.

The default value is li.
swipeElement String Swipe list container selector.

The default value is .ui-swipelist.
swipeLeftElement String Swipe left container selector.

The default value is .ui-swipelist-left.
swipeRightElement String Swipe right container selector.

The default value is .ui-swipelist-right.
threshold Number Define the threshold (in pixels) for the minimum swipe movement which allows the swipe action to appear.
animationThreshold IntNumbereger Define the threshold (in pixels) for the minimum swipe movement that allows a swipe animation (with a color change) to be shown. The animation threshold is usually the threshold for the next operation after the swipe.

The default value is 150.
animationDuration Number Define the swipe list animation duration.

Do not change the default value, since it has been defined to show a complete color change.

The default value is 200.
animationInterval Number Define the swipe list animation interval. The animation is called with the requestAnimationFrame() method once every 1/60 seconds. The interval determines how many coordinates the animation proceeds between each call. The animation ends when the coordinates reach the value defined as animationDuration. This option basically allows you to control the speed of the animation.

The default value is 8.
ltrStartColor String Define the start color for the left-to-right swipe.

The default value is #62a917.
ltrEndColor String Define the end color for the left-to-right swipe.

The default value is #58493a.
rtlStartColor String Define the start color for the right-to-left swipe.

The default value is #eaa317.
rtlEndColor String Define the end color for the right-to-left swipe.

The default value is #58493a.

Events

The following table lists the events related to swipe lists.

Event Description
swipelist.left Triggered when a left-to-right swipe is completed.
swipelist.right Triggered when a right-to-left swipe is completed.

To use the swipe list events, use the following code:

(function() 
{
   var slist = document.getElementById("swipelist");
   slist.addEventListener("swipelist.left", function(evt) 
   {
      /* You can connect your app with a native app (such as phone call or message) using the Device API */
   });
})();

Where to Go Next