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.
<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>
<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>
<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>
<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>
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 |
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 |