Swipeout List Vue Component

Swipeout List is not a separate component, but just a particular case of using <f7-list>, <f7-list-item> Vue components and special Framework7's Swipeout component.

Usage example

Swipe To Delete

<f7-list>
  <f7-list-item swipeout title="Item 1" @swipeout:deleted="onSwipeoutDeleted">
    <f7-swipeout-actions>
      <f7-swipeout-button delete>Delete</f7-swipeout-button>
    </f7-swipeout-actions>
  </f7-list-item>
  <f7-list-item swipeout title="Item 2" @swipeout:deleted="onSwipeoutDeleted">
    <f7-swipeout-actions>
      <f7-swipeout-button delete>Delete</f7-swipeout-button>
    </f7-swipeout-actions>
  </f7-list-item>
</f7-list>

Renders to:

<div class="list-block">
  <ul>
    <li class="swipeout">
      <div class="swipeout-content">
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Item 1</div>
          </div>
        </div>
      </div>
      <div class="swipeout-actions-right">
        <a href="#" class="swipeout-delete">Delete</a>
      </div>
    </li>
    <li class="swipeout">
      <div class="swipeout-content">
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Item 2</div>
          </div>
        </div>
      </div>
      <div class="swipeout-actions-right">
        <a href="#" class="swipeout-delete">Delete</a>
      </div>
    </li>
  </ul>
</div>

With Additional Actions

<f7-list>
  <f7-list-item swipeout title="Item 1" @swipeout:deleted="onSwipeoutDeleted">
    <f7-swipeout-actions>
      <f7-swipeout-button close color="blue">Reply</f7-swipeout-button>
      <f7-swipeout-button delete>Delete</f7-swipeout-button>
    </f7-swipeout-actions>
  </f7-list-item>
  <f7-list-item swipeout title="Item 2" @swipeout:deleted="onSwipeoutDeleted">
    <f7-swipeout-actions>
      <f7-swipeout-button close color="blue">Reply</f7-swipeout-button>
      <f7-swipeout-button delete>Delete</f7-swipeout-button>
    </f7-swipeout-actions>
  </f7-list-item>
</f7-list>

Renders to:

<div class="list-block">
  <ul>
    <li class="swipeout">
      <div class="swipeout-content">
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Item 1</div>
          </div>
        </div>
      </div>
      <div class="swipeout-actions-right">
        <a href="#" class="swipeout-close color-blue">Reply</a>
        <a href="#" class="swipeout-delete">Delete</a>
      </div>
    </li>
    <li class="swipeout">
      <div class="swipeout-content">
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Item 2</div>
          </div>
        </div>
      </div>
      <div class="swipeout-actions-right">
        <a href="#" class="swipeout-close color-blue">Reply</a>
        <a href="#" class="swipeout-delete">Delete</a>
      </div>
    </li>
  </ul>
</div>

With Actions On Left

<f7-list>
  <f7-list-item swipeout title="Item 1">
    <f7-swipeout-actions left>
      <f7-swipeout-button close color="orange">Mark</f7-swipeout-button>
    </f7-swipeout-actions>
  </f7-list-item>
  <f7-list-item swipeout title="Item 2">
    <f7-swipeout-actions left>
      <f7-swipeout-button close color="orange">Mark</f7-swipeout-button>
    </f7-swipeout-actions>
  </f7-list-item>
</f7-list>

Renders to:

<div class="list-block">
  <ul>
    <li class="swipeout">
      <div class="swipeout-content">
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Item 1</div>
          </div>
        </div>
      </div>
      <div class="swipeout-actions-left">
        <a href="#" class="swipeout-close color-orange">Mark</a>
      </div>
    </li>
    <li class="swipeout">
      <div class="swipeout-content">
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Item 2</div>
          </div>
        </div>
      </div>
      <div class="swipeout-actions-right">
        <a href="#" class="swipeout-close color-orange">Mark</a>
      </div>
    </li>
  </ul>
</div>

With Actions On Both Sides

<f7-list>
  <f7-list-item swipeout title="Item 1">
    <f7-swipeout-actions left>
      <f7-swipeout-button close color="orange">Mark</f7-swipeout-button>
    </f7-swipeout-actions>
    <f7-swipeout-actions right>
      <f7-swipeout-button delete>Delete</f7-swipeout-button>
    </f7-swipeout-actions>
  </f7-list-item>
  <f7-list-item swipeout title="Item 2">
    <f7-swipeout-actions left>
      <f7-swipeout-button close color="orange">Mark</f7-swipeout-button>
    </f7-swipeout-actions>
    <f7-swipeout-actions right>
      <f7-swipeout-button delete>Delete</f7-swipeout-button>
    </f7-swipeout-actions>
  </f7-list-item>
</f7-list>

Renders to:

<div class="list-block">
  <ul>
    <li class="swipeout">
      <div class="swipeout-content">
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Item 1</div>
          </div>
        </div>
      </div>
      <div class="swipeout-actions-left">
        <a href="#" class="swipeout-close color-orange">Mark</a>
      </div>
      <div class="swipeout-actions-right">
        <a href="#" class="swipeout-delete">Delete</a>
      </div>
    </li>
    <li class="swipeout">
      <div class="swipeout-content">
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Item 2</div>
          </div>
        </div>
      </div>
      <div class="swipeout-actions-right">
        <a href="#" class="swipeout-close color-orange">Mark</a>
      </div>
      <div class="swipeout-actions-right">
        <a href="#" class="swipeout-delete">Delete</a>
      </div>
    </li>
  </ul>
</div>

Properties

Prop Type Default Description
<f7-swipeout-actions> Properties
side string "right" Swipeout actions side
right boolean Shortcut for side: "right" prop
left boolean Shortcut for side: "right" prop
<f7-swipeout-button> Properties
delete boolean Will automatically delete swipeout list item on click
close boolean Will automatically close swipeout list item on click
overswipe boolean Will be triggered click automatically if you swipe actions too much. Overswipe
color string Button color. One of default colors

Events

The following events are avialiable on <f7-list-item> component whith enable swipeout:

Event Description
swipeout Event will be triggered while you move swipeout element. event.detail.progress contains current opened progress percentage
swipeout:open Event will be triggered when swipeout element starts its opening animation
swipeout:opened Event will be triggered after swipeout element completes its opening animation
swipeout:close Event will be triggered when swipeout element starts its closing animation
swipeout:closed Event will be triggered after swipeout element completes its closing animation
swipeout:delete Event will be triggered after swipeout element starts its delete animation
swipeout:deleted Event will be triggered after swipeout element completes its delete animation right before it will be removed from DOM