Swipeout List React Component

Swipeout List is not a separate component, but just a particular case of using <List>, <ListItem> React components and special Framework7's Swipeout component.

Usage example

Swipe To Delete

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

With Additional Actions

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

With Actions On Left

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

With Actions On Both Sides

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

Properties

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

Event Properties

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