<left-swipe-action>

Polymer Web Component <left-swipe-action>

<left-swipe-action> is built with Polymer to enables a left swipe gesture to open a content and show behind action buttons like iOS item list.

This component wraps your own element and the wrapper handles gesture events. The main content will be opened by a left swipe and specified buttons <left-swipe-action-button> will be shown behind of the content. The other gestures on the component will close the content.

<left-swipe-action>
    <div>
        <!-- 
          Your content to be swiped here
        -->
    </div>
    <left-swipe-action-button>
      <!-- 
        Your action here
      -->
    </left-swipe-action-button>
</left-swipe-action>

Screen example 1

Screen example 2

The elements other than left-swipe-action-button will be inserted to shadow DOM as main content. 'left-swipe-action-button' is a button to be fit with a content height. These are aligned as table cells.

CSS for both the main content and buttons in light DOM will be just applied.

Demo

http://tejitak.github.io/left-swipe-action/demo.html

Usage

Simple example

<left-swipe-action shadow>
    <div style="padding: 18px;">
        <div>My first Polymer project</div>
        <div><strong>Swipe me to left</strong></div>
    </div>
    <left-swipe-action-button style="background-color: #E81D62;" onclick="alert('delete')">Delete</left-swipe-action-button>
</left-swipe-action>

Multi actions example with paper elements

<left-swipe-action shadow>
    <div  style="padding: 18px;">
        <p>See how many actions are behind<br><strong>Swipe me to left</strong></p>
    </div>
    <left-swipe-action-button onclick="alert('delete')"><paper-fab icon="delete"></paper-fab></left-swipe-action-button>
    <left-swipe-action-button onclick="alert('star')"><paper-fab icon="star"></paper-fab></left-swipe-action-button>
</left-swipe-action>

This can be worked with Polymer <template repeat> or other MVC library (Angular.js, Vue.js etc.) like the following.

Template repeat example

<template repeat="{{[1,2,3,4,5]}}">
  <left-swipe-action shadow offset="40">
      <div class="list-container">
          <div class="list-thumb"><a href="https://twitter.com/tejitak" target="_blank"><paper-icon-button icon="social:person"></paper-icon-button></a></div>
          <div class="list-content">
              <div class="list-message">Tejitak</div>
              <div class="list-info">Repeated by &lt;template repeat&gt; ...</div>
          </div>
      </div>
      <left-swipe-action-button onclick="alert('delete')"><paper-fab icon="delete"></paper-fab></left-swipe-action-button>
      <left-swipe-action-button onclick="alert('star')"><paper-fab icon="star"></paper-fab></left-swipe-action-button>
      <left-swipe-action-button onclick="alert('schedule')"><paper-fab icon="schedule"></paper-fab></left-swipe-action-button>
  </left-swipe-action>
</template>

Attributes

Name	Type	Default	Description
open	boolean	false	If true, the content will be opened by default
nodrag	boolean	false	If true, drag (touch move) action is disabled and a content is automatically opened by click/touch
offset	number	60	Offset pixcel position for opened state
shadow	boolean	false	If true, box shadow is added
disabled	boolean	false	If true, all gestures are disabled

Getting Started

1. Install with bower
   bower install left-swipe-action --save

2. Load the web component and the dependencies

<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/left-swipe-action/left-swipe-action.html">

3. Markup with <left-swipe-action>

4. Done

Supported Browsers

Same as Polymer