framework7.angular/kitchen-sink-material/swipe-delete.html

Full Featured Mobile HTML Framework For Building iOS & Android Apps using Angularjs

<div data-page="swipe-delete" class="page" ng-controller="SwipeDeleteController">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left"><a href="index.html" class="back link icon-only"><i class="icon icon-back"></i></a></div>
      <div class="center">Swipe To Delete</div>
      <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
    </div>
  </div>
  <div class="page-content">
    <div class="content-block">
      <p>Swipe out actions on list elements is one of the most awesome F7 features. It allows you to call hidden menu for each list element where you can put default ready-to use delete button or any other buttons for some required actions. </p>
    </div>
    <div class="content-block-title">Swipe to delete with confirm modal</div>
    <div class="list-block">
      <ul>
        <li class="swipeout">
          <div class="item-content swipeout-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">Swipe left on me please</div>
            </div>
          </div>
          <div class="swipeout-actions-right"><a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Delete</a></div>
        </li>
        <li class="swipeout">
          <div class="item-content swipeout-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">Swipe left on me too</div>
            </div>
          </div>
          <div class="swipeout-actions-right"><a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Delete</a></div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">I am not removable</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="content-block-title">Swipe to delete without confirm</div>
    <div class="list-block">
      <ul>
        <li class="swipeout">
          <div class="item-content swipeout-content">
            <div class="item-inner">
              <div class="item-title">Swipe left on me please</div>
            </div>
          </div>
          <div class="swipeout-actions-right"><a href="#" class="swipeout-delete">Delete</a></div>
        </li>
        <li class="swipeout">
          <div class="item-content swipeout-content">
            <div class="item-inner">
              <div class="item-title">Swipe left on me too</div>
            </div>
          </div>
          <div class="swipeout-actions-right"><a href="#" class="swipeout-delete">Delete</a></div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">I am not removable</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="content-block-title">Swipe for actions</div>
    <div class="list-block">
      <ul>
        <li class="swipeout">
          <div class="item-content swipeout-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">Swipe left on me please</div>
            </div>
          </div>
          <div class="swipeout-actions-right"><a href="#" class="demo-actions">More</a><a href="#" class="swipeout-delete">Delete</a></div>
        </li>
        <li class="swipeout">
          <div class="item-content swipeout-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">Swipe left on me too</div>
            </div>
          </div>
          <div class="swipeout-actions-right"><a href="#" class="demo-actions">More</a><a href="#" class="swipeout-delete">Delete</a></div>
        </li>
        <li class="swipeout">
          <div class="item-content swipeout-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">You can't delete me</div>
            </div>
          </div>
          <div class="swipeout-actions-right"><a href="#" class="demo-actions">More</a></div>
        </li>
      </ul>
    </div>
    <div class="content-block-title">With callback on remove</div>
    <div class="list-block">
      <ul>
        <li class="swipeout demo-remove-callback">
          <div class="item-content swipeout-content">
            <div class="item-inner">
              <div class="item-title">Swipe left on me please</div>
            </div>
          </div>
          <div class="swipeout-actions-right"><a href="#" class="swipeout-delete">Delete</a></div>
        </li>
        <li class="swipeout demo-remove-callback">
          <div class="item-content swipeout-content">
            <div class="item-inner">
              <div class="item-title">Swipe left on me too</div>
            </div>
          </div>
          <div class="swipeout-actions-right"><a href="#" class="swipeout-delete">Delete</a></div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">I am not removable</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="content-block-title">With actions on left side (swipe to right)</div>
    <div class="list-block">
      <ul>
        <li class="swipeout">
          <div class="item-content swipeout-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">Swipe right on me please</div>
            </div>
          </div>
          <div class="swipeout-actions-left"><a href="#" class="bg-green demo-reply">Reply</a><a href="#" class="bg-blue demo-forward">Forward</a></div>
        </li>
        <li class="swipeout">
          <div class="item-content swipeout-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">Swipe right on me too</div>
            </div>
          </div>
          <div class="swipeout-actions-left"><a href="#" class="bg-green demo-reply">Reply</a><a href="#" class="bg-blue demo-forward">Forward</a></div>
        </li>
      </ul>
    </div>
    <div class="content-block-title">On both sides with overswipes</div>
    <div class="list-block media-list">
      <ul>
        <li class="swipeout">
          <div class="swipeout-content"><a href="#" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Facebook</div>
                  <div class="item-after">17:14</div>
                </div>
                <div class="item-subtitle">New messages from John Doe</div>
                <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
              </div></a></div>
          <div class="swipeout-actions-left"><a href="#" class="bg-green swipeout-overswipe demo-reply">Reply</a><a href="#" class="demo-forward bg-blue">Forward</a></div>
          <div class="swipeout-actions-right"><a href="#" class="demo-actions">More</a><a href="#" class="demo-mark bg-orange">Mark</a><a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a></div>
        </li>
        <li class="swipeout">
          <div class="swipeout-content"><a href="#" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">John Doe (via Twitter)</div>
                  <div class="item-after">17:11</div>
                </div>
                <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
                <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
              </div></a></div>
          <div class="swipeout-actions-left"><a href="#" class="bg-green swipeout-overswipe demo-reply">Reply</a><a href="#" class="demo-forward bg-blue">Forward</a></div>
          <div class="swipeout-actions-right"><a href="#" class="demo-actions">More</a><a href="#" class="demo-mark bg-orange">Mark</a><a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a></div>
        </li>
        <li class="swipeout">
          <div class="swipeout-content"><a href="#" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Facebook</div>
                  <div class="item-after">16:48</div>
                </div>
                <div class="item-subtitle">New messages from John Doe</div>
                <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
              </div></a></div>
          <div class="swipeout-actions-left"><a href="#" class="bg-green swipeout-overswipe demo-reply">Reply</a><a href="#" class="demo-forward bg-blue">Forward</a></div>
          <div class="swipeout-actions-right"><a href="#" class="demo-actions">More</a><a href="#" class="demo-mark bg-orange">Mark</a><a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a></div>
        </li>
        <li class="swipeout">
          <div class="swipeout-content"><a href="#" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">John Doe (via Twitter)</div>
                  <div class="item-after">15:32</div>
                </div>
                <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
                <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
              </div></a></div>
          <div class="swipeout-actions-left"><a href="#" class="bg-green swipeout-overswipe demo-reply">Reply</a><a href="#" class="demo-forward bg-blue">Forward</a></div>
          <div class="swipeout-actions-right"><a href="#" class="demo-actions">More</a><a href="#" class="demo-mark bg-orange">Mark</a><a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a></div>
        </li>
      </ul>
    </div>
  </div>
</div>