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:

    Where:

    • - 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
    • swipeout-delete - additional class on swipeout link that will delete swipeout list item when you click this link

    Note that **swipeout-content** and **swipeout-actions-left/right** should be direct children of

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

    1. <li class="swipeout">
    2.   <div class="swipeout-content item-content">
    3.     <div class="item-media">...</div>
    4.     <div class="item-inner">...</div>
    5.   </div>
    6.   <div class="swipeout-actions-right">
    7.     <a href="#">Action 1</a>
    8.     <a href="#">Action 2</a>
    9.   </div>
    10. </li>

    If you use the layout will be following:

    1. <li class="swipeout">
    2.   <div class="swipeout-content">
    3.     <a href="#" class="item-content item-link">
    4.       <div class="item-media">...</div>
    5.       <div class="item-inner">...</div>
    6.     </a>
    7.   </div>
    8.   <div class="swipeout-actions-right">
    9.     <a href="#">Action 1</a>
    10.     <a href="#">Action 2</a>
    11.   </div>
    12. </li>

    Swipe To Delete

    1. <li class="swipeout">
    2.   <div class="swipeout-content item-content">
    3.     <div class="item-media">...</div>
    4.     <div class="item-inner">...</div>
    5.   </div>
    6.   <div class="swipeout-actions-right">
    7.     <!-- Add this button and item will be deleted automatically -->
    8.     <a href="#" class="swipeout-delete">Delete</a>
    9.   </div>
    10. </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:

    1. <li class="swipeout">
    2.   <div class="swipeout-content item-content">
    3.     <div class="item-media">...</div>
    4.     <div class="item-inner">...</div>
    5.   </div>
    6.   <div class="swipeout-actions-right">
    7.     <!-- We add data-confirm and data-confirm-title attributes -->
    8.     <a href="#" class="swipeout-delete" data-confirm="Are you sure want to delete this item?" data-confirm-title="Delete?">Delete</a>
    9.   </div>
    10. </li>

    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:

    1. <li class="swipeout">
    2.   <div class="swipeout-content item-content">
    3.     <div class="item-media">...</div>
    4.     <div class="item-inner">...</div>
    5.   </div>
    6.   <div class="swipeout-actions-right">
    7.     <a href="#">More</a>
    8.     <a href="#" class="swipeout-delete swipeout-overswipe">Delete</a>
    9.     </div>
    10.   </div>
    11. </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

    Swipeout App Methods

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

    app.swipeout.open(el, side, callback) - reveal swipeout actions on specified element

    • el - HTMLElement or string (with CSS Selector) of list (
    • ) element with “swipeout” class. Required
    • side - 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
    • el - HTMLElement or string (with CSS Selector) of list (
    • ) element with “swipeout” class. Required
    • callback - function - callback function will be executed after swipeout element completes its closing animation

    app.swipeout.delete(el, callback) - delete specified swipeout element

    • el - HTMLElement or string (with CSS Selector) of list (
    • ) 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

    app.swipeout.el - property. Currently opened swipeout HTMLElement. Or undefined if there is no opened swipeout element

    It is possible to configure global swipeout behavior on app initialisation by passing swipeout related paremeters under swipeout property.

    To change these parameters we need to pass them on app init under swipeout property, for example:

    1. var app = new Framework7({
    2.   swipeout: {
    3.     noFollow: true,
    4.     removeElements: false
    5. });

    Swipeout Events

    Swipeout will fire the following DOM events and events on app instance:

    App Instance Events

    Sortable instance emit events on app instance.

    Below is the list of related CSS variables (CSS custom properties).

    1. :root {
    2.   --f7-swipeout-button-text-color: #fff;
    3.   --f7-swipeout-button-bg-color: #c7c7cc;
    4.   --f7-swipeout-delete-button-bg-color: #ff3b30;
    5.   --f7-swipeout-button-font-size: inherit;
    6.   --f7-swipeout-button-font-weight: inherit;
    7. }
    8. .ios {
    9.   --f7-swipeout-button-padding: 0 30px;
    10. }
    11. .md {
    13. }
    14. .aurora {
    15.   --f7-swipeout-button-padding: 0 12px;
    16.   --f7-swipeout-button-font-weight: 500;
    17. }

    Examples

    1. var app = new Framework7();
    2. var $$ = Dom7;

    Swipe to delete with confirm modal

    1. <div class="list">
    2.   <ul>
    3.     <li class="swipeout">
    4.       <div class="item-content swipeout-content">
    5.         <div class="item-media"><i class="icon icon-f7"></i>
    6.         </div>
    7.         <div class="item-inner">
    8.           <div class="item-title">Swipe left on me please</div>
    9.         </div>
    10.       </div>
    11.       <div class="swipeout-actions-right">
    12.         <a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Delete</a>
    13.       </div>
    14.     </li>
    15.     <li class="swipeout">
    16.       <div class="item-content swipeout-content">
    17.         <div class="item-media"> <i class="icon icon-f7"></i>
    18.         </div>
    19.         <div class="item-inner">
    20.           <div class="item-title">Swipe left on me too</div>
    21.         </div>
    22.       </div>
    23.       <div class="swipeout-actions-right">
    24.         <a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Delete</a>
    25.       </div>
    26.     </li>
    27.     <li>
    28.       <div class="item-content">
    29.         <div class="item-media">
    30.           <i class="icon icon-f7"></i>
    31.         </div>
    32.         <div class="item-inner">
    33.           <div class="item-title">I am not removable</div>
    34.         </div>
    35.       </div>
    36.     </li>
    37.   </ul>
    38. </div>

    Swipe to delete without confirm

    1. <div class="list">
    2.   <ul>
    3.     <li class="swipeout">
    4.       <div class="item-content swipeout-content">
    5.         <div class="item-inner">
    6.           <div class="item-title">Swipe left on me please</div>
    7.         </div>
    8.       </div>
    9.       <div class="swipeout-actions-right">
    10.         <a href="#" class="swipeout-delete">Delete</a>
    11.       </div>
    12.     </li>
    13.     <li class="swipeout">
    14.       <div class="item-content swipeout-content">
    15.         <div class="item-inner">
    16.           <div class="item-title">Swipe left on me too</div>
    17.         </div>
    18.       </div>
    19.       <div class="swipeout-actions-right">
    20.         <a href="#" class="swipeout-delete">Delete</a>
    21.       </div>
    22.     </li>
    23.     <li>
    24.       <div class="item-content">
    25.         <div class="item-inner">
    26.           <div class="item-title">I am not removable</div>
    27.         </div>
    28.       </div>
    29.     </li>
    30.   </ul>
    31. </div>

    Swipe for actions

    1. var moreActions = app.actions.create({
    2.   buttons: [
    3.     [
    4.         text: 'Here comes some optional description or warning for actions below',
    5.         label: true,
    6.       },
    7.       {
    8.         text: 'Action 1',
    9.       },
    11.         text: 'Action 2',
    12.       },
    13.     ],
    14.     [
    15.       {
    16.         text: 'Cancel',
    17.         bold: true,
    18.       }
    19.     ]
    20.   ],
    21. });
    22. $$('.open-more-actions').on('click', function () {
    23.   moreActions.open();
    24. });

    With callback on remove

    1. <div class="list">
    2.   <ul>
    3.     <li class="swipeout deleted-callback">
    4.       <div class="item-content swipeout-content">
    5.         <div class="item-inner">
    6.           <div class="item-title">Swipe left on me please</div>
    7.         </div>
    8.       </div>
    9.       <div class="swipeout-actions-right">
    10.         <a href="#" class="swipeout-delete">Delete</a>
    11.       </div>
    12.     </li>
    13.     <li class="swipeout deleted-callback">
    14.       <div class="item-content swipeout-content">
    15.         <div class="item-inner">
    16.           <div class="item-title">Swipe left on me too</div>
    17.         </div>
    18.       </div>
    19.       <div class="swipeout-actions-right">
    20.         <a href="#" class="swipeout-delete">Delete</a>
    21.       </div>
    22.     </li>
    23.     <li>
    24.       <div class="item-content">
    25.         <div class="item-inner">
    26.           <div class="item-title">I am not removable</div>
    27.         </div>
    28.       </div>
    29.     </li>
    30.   </ul>
    31. </div>
    1. $$('.deleted-callback').on('swipeout:deleted', function () {
    2.   app.dialog.alert('Thanks, item removed!');
    3. });

    With actions on left side (swipe to right)

    1. <div class="list">
    2.   <ul>
    3.     <li class="swipeout">
    4.       <div class="item-content swipeout-content">
    5.         <div class="item-media">
    6.           <i class="icon icon-f7"></i>
    7.         </div>
    8.         <div class="item-inner">
    9.           <div class="item-title">Swipe right on me please</div>
    10.         </div>
    11.       </div>
    12.       <div class="swipeout-actions-left">
    13.         <a href="#" class="color-green alert-reply">Reply</a>
    14.         <a href="#" class="color-blue alert-forward">Forward</a>
    15.       </div>
    16.     </li>
    17.     <li class="swipeout">
    18.       <div class="item-content swipeout-content">
    19.         <div class="item-media">
    20.           <i class="icon icon-f7"></i>
    21.         </div>
    22.         <div class="item-inner">
    23.           <div class="item-title">Swipe right on me too</div>
    24.         </div>
    25.       </div>
    26.       <div class="swipeout-actions-left">
    27.         <a href="#" class="color-green alert-reply">Reply</a>
    28.         <a href="#" class="color-blue alert-forward">Forward</a>
    29.       </div>
    30.     </li>
    31.   </ul>
    32. </div>
    1. $$('.alert-reply').on('click', function () {
    2.   app.dialog.alert('Reply');
    3. });
    4. $$('.alert-forward').on('click', function () {
    5.   app.dialog.alert('Forward');

    On both sides with overswipes