Swipeout List is not a separate component, but just a particular case of using <List>, <ListItem> React components and special Framework7's Swipeout component.
<List>
<ListItem swipeout title="Item 1" onSwipeoutDeleted={onSwipeoutDeleted}>
<ListItemSwipeoutActions>
<ListItemSwipeoutButton delete>Delete</ListItemSwipeoutButton>
</ListItemSwipeoutActions>
</ListItem>
<ListItem swipeout title="Item 2" onSwipeoutDeleted={onSwipeoutDeleted}>
<ListItemSwipeoutActions>
<ListItemSwipeoutButton delete>Delete</ListItemSwipeoutButton>
</ListItemSwipeoutActions>
</ListItem>
</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>
<List>
<ListItem swipeout title="Item 1" onSwipeoutDeleted={onSwipeoutDeleted}>
<ListItemSwipeoutActions>
<ListItemSwipeoutButton close color="blue">Reply</ListItemSwipeoutButton>
<ListItemSwipeoutButton delete>Delete</ListItemSwipeoutButton>
</ListItemSwipeoutActions>
</ListItem>
<ListItem swipeout title="Item 2" onSwipeoutDeleted={onSwipeoutDeleted}>
<ListItemSwipeoutActions>
<ListItemSwipeoutButton close color="blue">Reply</ListItemSwipeoutButton>
<ListItemSwipeoutButton delete>Delete</ListItemSwipeoutButton>
</ListItemSwipeoutActions>
</ListItem>
</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>
<List>
<ListItem swipeout title="Item 1">
<ListItemSwipeoutActions left>
<ListItemSwipeoutButton close color="orange">Mark</ListItemSwipeoutButton>
</ListItemSwipeoutActions>
</ListItem>
<ListItem swipeout title="Item 2">
<ListItemSwipeoutActions left>
<ListItemSwipeoutButton close color="orange">Mark</ListItemSwipeoutButton>
</ListItemSwipeoutActions>
</ListItem>
</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>
<List>
<ListItem swipeout title="Item 1">
<ListItemSwipeoutActions left>
<ListItemSwipeoutButton close color="orange">Mark</ListItemSwipeoutButton>
</ListItemSwipeoutActions>
<ListItemSwipeoutActions right>
<ListItemSwipeoutButton delete>Delete</ListItemSwipeoutButton>
</ListItemSwipeoutActions>
</ListItem>
<ListItem swipeout title="Item 2">
<ListItemSwipeoutActions left>
<ListItemSwipeoutButton close color="orange">Mark</ListItemSwipeoutButton>
</ListItemSwipeoutActions>
<ListItemSwipeoutActions right>
<ListItemSwipeoutButton delete>Delete</ListItemSwipeoutButton>
</ListItemSwipeoutActions>
</ListItem>
</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 |
---|---|---|---|
<ListItemSwipeoutActions> Properties | |||
side | string | "right" | Swipeout actions side |
right | boolean | Shortcut for side: "right" prop | |
left | boolean | Shortcut for side: "right" prop | |
<ListItemSwipeoutButton> 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 <ListItem> component whith enable swipeout:
Event | Description |
---|---|
onSwipeout | Event will be triggered while you move swipeout element. event.detail.progress contains current opened progress percentage |
onSwipeoutOpen | Event will be triggered when swipeout element starts its opening animation |
onSwipeoutOpened | Event will be triggered after swipeout element completes its opening animation |
onSwipeoutClose | Event will be triggered when swipeout element starts its closing animation |
onSwipeoutClosed | Event will be triggered after swipeout element completes its closing animation |
onSwipeoutDelete | Event will be triggered after swipeout element starts its delete animation |
onSwipeoutDeleted | Event will be triggered after swipeout element completes its delete animation right before it will be removed from DOM |