Swipe

The swipe component shows a list view on the screen where the list items can be swiped vertically to show a menu.

Table of Contents

  1. Default Selectors
  2. Manual Constructor
  3. HTML Examples
  4. Methods
  5. Opening the Swipe component

Default Selectors

By default, all HTML elements with the data-role="swipe" attribute are displayed as swipes.

Manual Constructor

To manually create a swipe component, use the component constructor from the tau namespace (RECOMMENDED):

<div id="swipe">
   <div data-role="swipe-item-cover">
      Cover - swipe to open
   </div>
   <div data-role="swipe-item">
      <div data-role="button" data-inline="true">First item</div>
   </div>
</div>
<script>
   var swipeElement = document.getElementById("swipe"),
       swipe = tau.widget.Swipe(swipeElement);
</script>

If the jQuery library is loaded, you can use its method (support for backward compatibility):

<div id="swipe">
   <div data-role="swipe-item-cover">
      Cover - swipe to open
   </div>
   <div data-role="swipe-item">
      <div data-role="button" data-inline="true">First item</div>
   </div>
</div>
<script>
   var swipe = $("#swipe").swipe();
</script>

HTML Examples

To create a swipe component using the data-role attribute with one covered item:

<div id="swipe" data-role="swipe">
   <div data-role="swipe-item-cover">
      Cover - swipe to open
   </div>
   <div data-role="swipe-item">
      <div data-role="button" data-inline="true">First item</div>
   </div>
</div>

Methods

To call a method on the component, use one of the existing APIs:

Summary

Method Description
open (  ) 

Runs opening animations.

boolean opened (  ) 

Checks whether a swipe element is opened.

close (  ) 

Runs closing animations.

open

Runs opening animations.

open ( ) 

Return value:

No return value

Code example (TAU API RECOMMENDED):

<div id="swipe" data-role="swipe">
   <div data-role="swipe-item-cover">
      Swipe
   </div>
   <div data-role="swipe-item">
      <div data-role="button" data-inline="true">First item</div>
      <div data-role="button" data-inline="true">Second item</div>
   </div>
</div>
<script>
   var swipeWidget = tau.widget.Swipe(document.getElementById("swipe"));
   swipeWidget.open();
<script>

Code example (jQuery API support for backward compatibility):

<div  id="swipe" data-role="swipe">
   <div data-role="swipe-item-cover">
      Swipe
   </div>
   <div data-role="swipe-item">
      <div data-role="button" data-inline="true">First item</div>
      <div data-role="button" data-inline="true">Second item</div>
   </div>
</div>
<script>
   $("#swipe").swipe("open");
</script>
opened

Checks whether a swipe element is opened.

boolean opened ( ) 

Return value:

Type Description
boolean True, if the swipe element is opened.

Code example (TAU API RECOMMENDED):

<div id="swipe" data-role="swipe">
   <div data-role="swipe-item-cover">
      Swipe
   </div>
   <div data-role="swipe-item">
      <div data-role="button" data-inline="true">First item</div>
      <div data-role="button" data-inline="true">Second item</div>
   </div>
</div>
<script>
   var swipeWidget = tau.widget.Swipe(document.getElementById("swipe"));
   isOpened = swipeWidget.opened();
<script>

Code example (jQuery API support for backward compatibility):

<div  id="swipe" data-role="swipe">
   <div data-role="swipe-item-cover">
      Swipe
   </div>
   <div data-role="swipe-item">
      <div data-role="button" data-inline="true">First item</div>
      <div data-role="button" data-inline="true">Second item</div>
   </div>
</div>
<script>
   var isOpened = $("#swipe").swipe("opened");
</script>
close

Runs closing animations.

close ( ) 

Return value:

No return value

Code example (TAU API RECOMMENDED):

<div id="swipe" data-role="swipe">
   <div data-role="swipe-item-cover">
      Swipe
   </div>
   <div data-role="swipe-item">
      <div data-role="button" data-inline="true">First item</div>
      <div data-role="button" data-inline="true">Second item</div>
   </div>
</div>
<script>
   var swipeWidget = tau.widget.Swipe(document.getElementById("swipe"));
   swipeWidget.close();
<script>

Code example (jQuery API support for backward compatibility):

<div id="swipe" data-role="swipe">
   <div data-role="swipe-item-cover">
      Swipe
   </div>
   <div data-role="swipe-item">
      <div data-role="button" data-inline="true">First item</div>
      <div data-role="button" data-inline="true">Second item</div>
   </div>
</div>
<script>
   $("#swipe").swipe("close");
</script>

Opening the Swipe component

There are 3 ways to open swipe component (uncover the items of the component):