Get Started
Vue Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
- Forms
  - Checkboxes & Radios
  - Form Elements
  - Smart Select
- Icon
- Grid / Layout Grid
- Lists
  - List
  - List Item
  - List Button
  - Accordion List
  - Contacts List
  - Sortable List
  - Swipeout List
  - Virtual List
- Link
- Messages
- Message Bar
- Modals
  - Action Sheet
  - Login Screen
  - Picker Modal
  - Popover
  - Popup
- Navigation Bars
  - Navbar
  - Toolbar/Tabbar
  - Sub Navbar
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View

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