Swipeout (Swipeable List)

Swipeout is an extension of list view that allows you to swipe over list elements to reveal hidden menu with available actions, like swipe-to-delete.

Let's look on layout structure of swipeout element in your list views:

<div class="list-block">
  <ul>
    <!-- Additional "swipeout" class on li -->
    <li class="swipeout">
      <!-- Usual list element wrapped with "swipeout-content" -->
      <div class="swipeout-content">
        <!-- Your list element here -->
        <div class="item-content">
          <div class="item-media">...</div>
          <div class="item-inner">...</div>
        </div>
      </div>
      <!-- Swipeout actions left -->
      <div class="swipeout-actions-left">
        <!-- Swipeout actions links/buttons -->
        <a href="#">Action 1</a>
        <a href="#">Action 2</a>
      </div>
      <!-- Swipeout actions right -->
      <div class="swipeout-actions-right">
        <!-- Swipeout actions links/buttons -->
        <a href="#">Action 1</a>
        <a class="swipeout-close" href="#">Action 2</a>
      </div>
    </li>
    ...
  </ul>
</div>

Where:

  • swipeout-content - wrapper for your list element. This container will move during swipe over the list item
  • swipeout-actions-left - container with left swipeout action buttons/links
  • swipeout-actions-right - container with right swipeout action buttons/links
  • swipeout-close - additional class on swipeout link that will close swipeout element when you click this link

Note that swipeout-content and swipeout-actions-left/right should be direct children of <li>

If you have only "item-content" you can simplify layout by adding "item-content" class to "swipeout-content":

<li class="swipeout">
  <div class="swipeout-content item-content">
    <div class="item-media">...</div>
    <div class="item-inner">...</div>
  </div>
  <div class="swipeout-actions-right">
    <a href="#">Action 1</a>
    <a href="#">Action 2</a>
  </div>
</li>

If you use link elements you can use all these classes on link:

<li class="swipeout">
  <div class="swipeout-content">
    <a href="#" class="item-content item-link">
      <div class="item-media">...</div>
      <div class="item-inner">...</div>
    </a>
  </div>
  <div class="swipeout-actions-right">
    <a href="#">Action 1</a>
    <a href="#">Action 2</a>
  </div>
</li>

Example

<!-- On right side -->
<div class="list-block">
  <ul>
    <li class="swipeout">
      <div class="swipeout-content item-content">
        <div class="item-media">...</div>
        <div class="item-inner">...</div>
      </div>
      <div class="swipeout-actions-right">
        <a href="#" class="action1">Action 1</a>
      </div>
    </li>
    <li class="swipeout">
      <div class="swipeout-content item-content">
        <div class="item-media">...</div>
        <div class="item-inner">...</div>
      </div>
      <div class="swipeout-actions-right">
        <a href="#" class="action1 bg-orange">Action 1</a>
        <a href="#" class="action2">Action 2</a>
      </div>
    </li>
    ...
  </ul>
</div>
 
<!-- On left side -->
<div class="list-block">
  <ul>
    <li class="swipeout">
      <div class="swipeout-content item-content">
        <div class="item-media">...</div>
        <div class="item-inner">...</div>
      </div>
      <div class="swipeout-actions-left">
        <a href="#" class="action1">Action 1</a>
      </div>
    </li>
    <li class="swipeout">
      <div class="swipeout-content item-content">
        <div class="item-media">...</div>
        <div class="item-inner">...</div>
      </div>
      <div class="swipeout-actions-left">
        <a href="#" class="action1 bg-orange">Action 1</a>
        <a href="#" class="action2">Action 2</a>
      </div>
    </li>
    ...
  </ul>
</div>
 
<!-- On both sides -->
<div class="list-block">
  <ul>
    <li class="swipeout">
      <div class="swipeout-content item-content">
        <div class="item-media">...</div>
        <div class="item-inner">...</div>
      </div>
      <div class="swipeout-actions-left">
        <a href="#" class="action1">Action L1</a>
      </div>
      <div class="swipeout-actions-right">
        <a href="#" class="action1">Action R1</a>
      </div>
    </li>
    <li class="swipeout">
      <div class="swipeout-content item-content">
        <div class="item-media">...</div>
        <div class="item-inner">...</div>
      </div>
      <div class="swipeout-actions-left">
        <a href="#" class="action1 bg-pink">Action L1</a>
        <a href="#" class="action2 bg-lightblue">Action L2</a>
      </div>
      <div class="swipeout-actions-right">
        <a href="#" class="action1 bg-orange">Action R1</a>
        <a href="#" class="action2">Action R2</a>
      </div>
    </li>
    ...
  </ul>
</div>
var myApp = new Framework7();
 
var $$ = Dom7;
 
$$('.action1').on('click', function () {
  myApp.alert('Action 1');
});
$$('.action2').on('click', function () {
  myApp.alert('Action 2');
});  

Swipe To Delete

Framework7 supports this frequently used feature from the box without single line of JavaScript. All you need is to add <a class="swipeout-delete"> link to swipeout actions buttons:

<li class="swipeout">
  <div class="swipeout-content item-content">
    <div class="item-media">...</div>
    <div class="item-inner">...</div>
  </div>
  <div class="swipeout-actions-right">
    <!-- Add this button and item will be deleted automatically -->
    <a href="#" class="swipeout-delete">Delete</a>
  </div>
</li>

It is also possible to call Confirm modal when user clicks on "Delete" button, and element will be removed only after confirmation. To make delete on confirmation you need to add additional data-confirm and data-confirm-title (optional) attributes to Delete link:

<li class="swipeout">
  <div class="swipeout-content item-content">
    <div class="item-media">...</div>
    <div class="item-inner">...</div>
  </div>
  <div class="swipeout-actions-right">
    <!-- We add data-confirm and data-confirm-title attributes -->
    <a href="#" class="swipeout-delete" data-confirm="Are you sure want to delete this item?" data-confirm-title="Delete?">Delete</a>
    </div>
  </div>
</li>

If you want to close swipeout element when user dismissed Confirm modal, then you need also to add data-close-on-cancel attribute:

<li class="swipeout">
  <div class="swipeout-content item-content">
    <div class="item-media">...</div>
    <div class="item-inner">...</div>
  </div>
  <div class="swipeout-actions-right">
    <!-- We add data-close-on-cancel attribute to close swipeout automatically -->
    <a href="#" class="swipeout-delete" data-confirm="Are you sure want to delete this item?" data-confirm-title="Delete?" data-close-on-cancel="true">Delete</a>
    </div>
  </div>
</li>

Overswipe

Swipeouts also support "overswipe" actions that will be triggered automatically if you swipe actions too much. In this case we need to add "swipeout-overswipe" class to required actions button:

<li class="swipeout">
  <div class="swipeout-content item-content">
    <div class="item-media">...</div>
    <div class="item-inner">...</div>
  </div>
  <div class="swipeout-actions-right">
    <a href="#">More</a>
    <a href="#" class="swipeout-delete swipeout-overswipe">Delete</a>
    </div>
  </div>
</li>
  • overswipe can be used only on last button in right swipeout actions, and only on first button in left swipeout actions.

  • With overswipe, script will automatically trigger "click" event on overswipe button, so you need to add appropriate event listener to this button

  • Overswipe button will have additonal "swipeout-overswipe-active" class during overswipe which you can use for additional styling of such state

<li class="swipeout">
  <div class="swipeout-content">
    <a href="#" class="item-content item-link">
      <div class="item-inner">
        <div class="item-title-row">
          <div class="item-title">Facebook</div>
          <div class="item-after">17:14</div>
        </div>
        <div class="item-subtitle">New messages from John Doe</div>
        <div class="item-text">Lorem ipsum ...</div>
      </div>
    </a>
  </div>
  <div class="swipeout-actions-left">
    <a href="#" class="swipeout-overswipe bg-green reply">Reply</a>
    <a href="#" class="bg-blue forward">Forward</a>
  </div>
  <div class="swipeout-actions-right">
    <a href="#" class="mark bg-orange">Mark</a>
    <a href="#" class="swipeout-delete swipeout-overswipe">Delete</a>
  </div>
</li>
var myApp = new Framework7();
 
var $$ = Dom7;
 
$$('.mark').on('click', function () {
  myApp.alert('Mark');
});
$$('.reply').on('click', function () {
  myApp.alert('Reply');
});
$$('.forward').on('click', function () {
  myApp.alert('Forward');
});          

Swipeout JavaScript API

Swipeouts also has rich JavaScript API that allows you to control swipeout elements. Let's look on appropriate App's properties and methods:

myApp.swipeoutOpen(el, direction, callback) - reveal swipeout actions on specified element

  • el - HTMLElement or string (with CSS Selector) of list (<li>) element with "swipeout" class. Required
  • direction - string (could be "left" or "right") swipeout actions to open. Should be specified if item has both left and right swipeout actions. Optional
  • callback - function - callback function will be executed after swipeout element completes its opening animation

myApp.swipeoutClose(el, callback) - close swipeout actions on specified element

  • el - HTMLElement or string (with CSS Selector) of list (<li>) element with "swipeout" class. Required
  • callback - function - callback function will be executed after swipeout element completes its closing animation

myApp.swipeoutDelete(el, callback) - delete specified swipeout element

  • el - HTMLElement or string (with CSS Selector) of list (<li>) element with "swipeout" class. Required
  • callback - function - callback function will be executed after swipeout element completes its delete animation right before it will be removed from DOM

myApp.swipeoutOpenedEl - property. Contains link to currently opened swipeout HTMLElement. Or equal to 'undefined' if none of elements are currently opened

Swipeout events

Swipeout elements have the following events:

Event Target Description
swipeout Swipeout Element<li class="swipeout"> Event will be triggered while you move swipeout element. event.detail.progress contains current opened progress percentage
swipeout:open Swipeout Element<li class="swipeout"> Event will be triggered when swipeout element starts its opening animation
swipeout:opened Swipeout Element<li class="swipeout"> Event will be triggered after swipeout element completes its opening animation
swipeout:close Swipeout Element<li class="swipeout"> Event will be triggered when swipeout element starts its closing animation
swipeout:closed Swipeout Element<li class="swipeout"> Event will be triggered after swipeout element completes its closing animation
swipeout:delete Swipeout Element<li class="swipeout"> Event will be triggered after swipeout element starts its delete animation
swipeout:deleted Swipeout Element<li class="swipeout"> Event will be triggered after swipeout element completes its delete animation right before it will be removed from DOM
var myApp = new Framework7();
 
var $$ = Dom7;
 
$$('.swipeout').on('swipeout:deleted', function () {
  myApp.alert('Item removed');
}); 
 
$$('.swipeout').on('swipeout', function (e) {
  console.log('Item opened on: ' + e.detail.progress + '%');
});