Skip to content

Polymer web component like iOS swipe actions

Notifications You must be signed in to change notification settings

tejitak/left-swipe-action

Repository files navigation

<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

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">
  1. Markup with <left-swipe-action>

  2. Done

Supported Browsers

Same as Polymer

About

Polymer web component like iOS swipe actions

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

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages