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

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

.page(data-page="swipe-delete")
  .navbar
    .navbar-inner
      .left
        a(href="index.html").back.link.icon-only
          i.icon.icon-back
      .center Swipe To Delete
      .right
        a(href="#").open-panel.link.icon-only
          i.icon.icon-bars
  .page-content
    .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. 
    .content-block-title Swipe to delete with confirm modal
    .list-block
      ul
        li.swipeout
          .item-content.swipeout-content
            .item-media
              i.icon.icon-f7
            .item-inner 
              .item-title Swipe left on me please
          .swipeout-actions-right
            a(href="#", data-confirm="Are you sure you want to delete this item?").swipeout-delete Delete
        li.swipeout
          .item-content.swipeout-content
            .item-media
              i.icon.icon-f7
            .item-inner 
              .item-title Swipe left on me too
          .swipeout-actions-right
            a(href="#", data-confirm="Are you sure you want to delete this item?").swipeout-delete Delete
        li
          .item-content
            .item-media
              i.icon.icon-f7
            .item-inner 
              .item-title I am not removable
    .content-block-title Swipe to delete without confirm
    .list-block
      ul
        li.swipeout
          .item-content.swipeout-content
            .item-inner 
              .item-title Swipe left on me please
          .swipeout-actions-right
            a(href="#").swipeout-delete Delete
        li.swipeout
          .item-content.swipeout-content
            .item-inner 
              .item-title Swipe left on me too
          .swipeout-actions-right
            a(href="#").swipeout-delete Delete
        li
          .item-content
            .item-inner 
              .item-title I am not removable
    .content-block-title Swipe for actions
    .list-block
      ul
        li.swipeout
          .item-content.swipeout-content
            .item-media
              i.icon.icon-f7
            .item-inner 
              .item-title Swipe left on me please
          .swipeout-actions-right
            a(href="#").demo-actions More
            a(href="#").swipeout-delete Delete
        li.swipeout
          .item-content.swipeout-content
            .item-media
              i.icon.icon-f7
            .item-inner 
              .item-title Swipe left on me too
          .swipeout-actions-right
            a(href="#").demo-actions More
            a(href="#").swipeout-delete Delete
        li.swipeout
          .item-content.swipeout-content
            .item-media
              i.icon.icon-f7
            .item-inner 
              .item-title You can't delete me
          .swipeout-actions-right
            a(href="#").demo-actions More
    .content-block-title With callback on remove
    .list-block
      ul
        li.swipeout.demo-remove-callback
          .item-content.swipeout-content
            .item-inner 
              .item-title Swipe left on me please
          .swipeout-actions-right
            a(href="#").swipeout-delete Delete
        li.swipeout.demo-remove-callback
          .item-content.swipeout-content
            .item-inner 
              .item-title Swipe left on me too
          .swipeout-actions-right
            a(href="#").swipeout-delete Delete
        li
          .item-content
            .item-inner 
              .item-title I am not removable
    .content-block-title With actions on left side (swipe to right)
    .list-block
      ul
        li.swipeout
          .item-content.swipeout-content
            .item-media
              i.icon.icon-f7
            .item-inner 
              .item-title Swipe right on me please
          .swipeout-actions-left
            a(href="#").bg-green.demo-reply Reply
            a(href="#").bg-blue.demo-forward Forward
        li.swipeout
          .item-content.swipeout-content
            .item-media
              i.icon.icon-f7
            .item-inner 
              .item-title Swipe right on me too
          .swipeout-actions-left
            a(href="#").bg-green.demo-reply Reply
            a(href="#").bg-blue.demo-forward Forward
    .content-block-title On both sides with overswipes
    .list-block.media-list
      ul
        li.swipeout
          .swipeout-content
            a(href="#").item-link.item-content
              .item-inner
                .item-title-row
                  .item-title Facebook
                  .item-after 17:14
                .item-subtitle New messages from John Doe
                .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.
          .swipeout-actions-left
            a(href="#").bg-green.swipeout-overswipe.demo-reply Reply
            a(href="#").demo-forward.bg-blue Forward
          .swipeout-actions-right
            a(href="#").demo-actions More
            a(href="#").demo-mark.bg-orange Mark
            a(href="#", data-confirm="Are you sure you want to delete this item?").swipeout-delete.swipeout-overswipe Delete
        li.swipeout
          .swipeout-content
            a(href="#").item-link.item-content
              .item-inner
                .item-title-row
                  .item-title John Doe (via Twitter)
                  .item-after 17:11
                .item-subtitle John Doe (@_johndoe) mentioned you on Twitter!
                .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.
          .swipeout-actions-left
            a(href="#").bg-green.swipeout-overswipe.demo-reply Reply
            a(href="#").demo-forward.bg-blue Forward
          .swipeout-actions-right
            a(href="#").demo-actions More
            a(href="#").demo-mark.bg-orange Mark
            a(href="#", data-confirm="Are you sure you want to delete this item?").swipeout-delete.swipeout-overswipe Delete
        li.swipeout
          .swipeout-content
            a(href="#").item-link.item-content
              .item-inner
                .item-title-row
                  .item-title Facebook
                  .item-after 16:48
                .item-subtitle New messages from John Doe
                .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.
          .swipeout-actions-left
            a(href="#").bg-green.swipeout-overswipe.demo-reply Reply
            a(href="#").demo-forward.bg-blue Forward
          .swipeout-actions-right
            a(href="#").demo-actions More
            a(href="#").demo-mark.bg-orange Mark
            a(href="#", data-confirm="Are you sure you want to delete this item?").swipeout-delete.swipeout-overswipe Delete
        li.swipeout
          .swipeout-content
            a(href="#").item-link.item-content
              .item-inner
                .item-title-row
                  .item-title John Doe (via Twitter)
                  .item-after 15:32
                .item-subtitle John Doe (@_johndoe) mentioned you on Twitter!
                .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.
          .swipeout-actions-left
            a(href="#").bg-green.swipeout-overswipe.demo-reply Reply
            a(href="#").demo-forward.bg-blue Forward
          .swipeout-actions-right
            a(href="#").demo-actions More
            a(href="#").demo-mark.bg-orange Mark
            a(href="#", data-confirm="Are you sure you want to delete this item?").swipeout-delete.swipeout-overswipe Delete