-
Get Started
-
Vue Components
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
Swipeout Vue Component
Swipeout List is not a separate component, but just a particular case of using <f7-list>, <f7-list-item swipeout> Vue components and additional Swipeout components.
Swipeout Vue component represents Framework7's Swipeout component.
Swipeout Components
There are following components included:
f7-swipeout-actions
- wrapper for swipeout buttonsf7-swipeout-button
- single swipeout button
Swipeout 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 | false | Will automatically delete swipeout list item on click |
close | boolean | false | Will automatically close swipeout list item on click |
overswipe | boolean | false | Will be triggered click automatically if you swipe actions too much - overswipe |
text | string | Swipeout button text label | |
confirmText | string | This text will be shown in dialog where user must agree before item delete |
Swipeout Events
Event | Description |
---|---|
<f7-swipeout-button> events | |
click | Event will be triggered on swipeout button click |
<f7-list-item> events The following events will be available on <f7-list-item> with swipeout enabled |
|
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 |
Examples
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">
<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">
<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">
<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">
<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>