<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 screen1

Screen example 2 screen2

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

Getting Started

Install with bower bower install left-swipe-action --save
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">