Skip to content

Latest commit

 

History

History

PhotonSwipe

README.md

Lists & Swipes

Swipe Swipe

Swipes Showreel

The <list-group> element is theoretically independent but it is recommended to use it within a sidebar pane such as <div class="pane-sm sidebar"> because this is the way how the UI is meant. More about pane and pane group you can read in the documentation.

Layout

The context should look like the following.

...
<div class="pane-group">
  ...
  <div class="pane-sm sidebar">


    <list-group>
      ...
      <!--One of the list items-->
      <list-item>
        ...
      </list-item>
      ...
    </list-group>
    

  </div>
  ...
</div>
...

List Group

The list group in general is not complicated. Just use the element <list-group> without any needed attributes.

List Item

A <list-item> shall be used within you <list-group> as a single item. There can be so many <list-item>'s as you want :)

A <list-item> has three important inner elements.

  1. Action List on Left (Swipes) (Optional)
  2. Item Inner
  3. Action List on Right (Swipes) (Optional)
...
<list-item>
  <!--Left actions-->
  <action-list role="left">
    ...
    <swipe-action style="background-color: #006ff1;">
      <action-inner>
        <span>Swipe Action</span>
      </action-inner>
    </swipe-action>
    ...
  </action-list>
  <!--Item inner-->
  <item-inner>
    Item Inner
  </item-inner>
  <!--Right actions-->
  <action-list role="right">
    ...
    <swipe-action style="background-color: #1aa431;">
      <action-inner>
        <span>Swipe Action</span>
      </action-inner>
    </swipe-action>
    ...
  </action-list>
</list-item>
...

As you can see, there are swipe actions used within. A swipe action has to be within a <action-list>. Such an <action-list> has to be left or right (before or after) the <item-inner> of a <list-item>. In the first case it should have the role left and as list on the right side, it should have the role right.

Within a <action-list> you can put much <swipe-action>'s as you want but more than 3 are not recommended.

Action List

<!--Role can be "left" (If this is before the item-inner or "right" if it is after item-inner)-->
<action-list role="left">
  ...
  <!--Use the color you like for each swipe action-->
  <swipe-action style="background-color: red;">
    <action-inner>
      <span>Swipe Action</span>
    </action-inner>
  </swipe-action>
  ...
</action-list>

Swipe Action

A <swipe-action> can contain a special icon container which is used for a centered icon you may use.

...
<!--Use the color you like for each swipe action-->
<swipe-action style="background-color: red;">
  <action-inner>
    <!--Example icon-->
    <div class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="100%" height="100%">
        <path style="fill: #fff;" d="M 24.984375 -0.013671875 A 1.0001 1.0001 0 0 0 24 1 L 24 8.5859375 L 19.707031 4.2929688 A 1.0001 1.0001 0 0 0 18.990234 3.9902344 A 1.0001 1.0001 0 0 0 18.292969 5.7070312 L 24 11.414062 L 24 23.269531 L 13.734375 17.341797 L 11.646484 9.5449219 A 1.0001 1.0001 0 0 0 10.699219 8.7910156 A 1.0001 1.0001 0 0 0 9.7148438 10.0625 L 11.285156 15.927734 L 4.7148438 12.134766 A 1.0001 1.0001 0 0 0 4.2402344 11.992188 A 1.0001 1.0001 0 0 0 4.140625 11.994141 A 1.0001 1.0001 0 0 0 3.7148438 13.865234 L 10.285156 17.658203 L 4.421875 19.230469 A 1.0001 1.0001 0 1 0 4.9394531 21.162109 L 12.736328 19.074219 L 23.001953 25 L 12.736328 30.925781 L 4.9394531 28.837891 A 1.0001 1.0001 0 0 0 4.6425781 28.800781 A 1.0001 1.0001 0 0 0 4.421875 30.769531 L 10.285156 32.341797 L 3.7148438 36.134766 A 1.0001 1.0001 0 1 0 4.7148438 37.865234 L 11.285156 34.072266 L 9.7148438 39.9375 A 1.0001 1.0001 0 1 0 11.646484 40.455078 L 13.734375 32.658203 L 24 26.730469 L 24 38.585938 L 18.292969 44.292969 A 1.0001 1.0001 0 1 0 19.707031 45.707031 L 24 41.414062 L 24 49 A 1.0001 1.0001 0 1 0 26 49 L 26 41.414062 L 30.292969 45.707031 A 1.0001 1.0001 0 1 0 31.707031 44.292969 L 26 38.585938 L 26 26.730469 L 36.265625 32.658203 L 38.353516 40.455078 A 1.0001 1.0001 0 1 0 40.285156 39.9375 L 38.714844 34.072266 L 45.285156 37.865234 A 1.0001 1.0001 0 1 0 46.285156 36.134766 L 39.714844 32.341797 L 45.578125 30.769531 A 1.0001 1.0001 0 0 0 45.328125 28.800781 A 1.0001 1.0001 0 0 0 45.060547 28.837891 L 37.263672 30.925781 L 26.998047 25 L 37.263672 19.074219 L 45.060547 21.162109 A 1.0001 1.0001 0 1 0 45.578125 19.230469 L 39.714844 17.658203 L 46.285156 13.865234 A 1.0001 1.0001 0 0 0 45.830078 11.994141 A 1.0001 1.0001 0 0 0 45.285156 12.134766 L 38.714844 15.927734 L 40.285156 10.0625 A 1.0001 1.0001 0 0 0 39.269531 8.7910156 A 1.0001 1.0001 0 0 0 38.353516 9.5449219 L 36.265625 17.341797 L 26 23.269531 L 26 11.414062 L 31.707031 5.7070312 A 1.0001 1.0001 0 1 0 30.292969 4.2929688 L 26 8.5859375 L 26 1 A 1.0001 1.0001 0 0 0 24.984375 -0.013671875 z"></path>
      </svg>
    </div>
    <span>Swipe Action</span>
  </action-inner>
</swipe-action>
...

Example

...
<list-group>
  <list-item>
    <action-list role="left">
      <swipe-action style="background-color: #006ff1;">
        <action-inner>
          <div class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" version="1.1" width="100%" height="100%">
              <path style="fill: #fff;" d="M 33.84375 1.4375 L 28.71875 9.125 L 40.875 21.28125 L 48.5625 16.15625 Z M 28.1875 11.4375 C 24.710938 14.058594 20.484375 15 13 15 L 12.1875 15 L 12.03125 15.8125 C 10.175781 25.089844 3.867188 43.328125 3.125 45.46875 L 21.28125 27.28125 C 21.332031 27.230469 21.410156 27.226563 21.46875 27.1875 C 21.292969 26.824219 21.1875 26.398438 21.1875 25.96875 C 21.1875 24.453125 22.421875 23.25 23.9375 23.25 C 25.453125 23.25 26.6875 24.453125 26.6875 25.96875 C 26.6875 27.488281 25.457031 28.71875 23.9375 28.71875 C 23.550781 28.71875 23.179688 28.644531 22.84375 28.5 C 22.800781 28.570313 22.777344 28.660156 22.71875 28.71875 L 4.53125 46.875 C 6.664063 46.132813 24.90625 39.824219 34.1875 37.96875 L 35 37.8125 L 35 37 C 35 29.515625 35.941406 25.289063 38.5625 21.8125 Z "></path>
            </svg>
          </div>
          <span>Action A</span>
        </action-inner>
      </swipe-action>
      <swipe-action style="background-color: #00b16c;">
        <action-inner>
          <div class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" version="1.1" width="100%" height="100%">
              <path style="fill: #fff;" d="M 9 8 C 8.449219 8 8 8.449219 8 9 L 5 9 C 4.449219 9 4 9.449219 4 10 L 4 19 C 4 19.550781 4.449219 20 5 20 C 6.457031 20 8 21.542969 8 23 C 8 24.296875 7.144531 25.582031 6.054688 27.214844 C 4.34375 29.78125 2 33.296875 2 39 C 2 39.058594 2.003906 39.117188 2.015625 39.171875 C 2.035156 39.289063 2.558594 42 6.550781 42 L 11.882813 42 C 14.375 42 15.714844 41.082031 16.214844 39.03125 L 18.777344 29 L 28.320313 29 C 28.75 29 29.132813 28.722656 29.269531 28.316406 L 31.71875 21 L 44 21 C 44.265625 21 44.519531 20.894531 44.707031 20.707031 L 45.414063 20 L 47 20 C 47.550781 20 48 19.550781 48 19 L 48 10 C 48 9.449219 47.550781 9 47 9 L 45.414063 9 L 44.707031 8.292969 C 44.519531 8.105469 44.265625 8 44 8 L 42 8 C 41.449219 8 41 8.449219 41 9 L 12.414063 9 L 11.707031 8.292969 C 11.519531 8.105469 11.265625 8 11 8 Z M 21 13 L 27 13 C 27.550781 13 28 13.449219 28 14 C 28 14.550781 27.550781 15 27 15 L 21 15 C 20.449219 15 20 14.550781 20 14 C 20 13.449219 20.449219 13 21 13 Z M 24.191406 21 L 29.609375 21 L 27.601563 27 L 21.871094 27 C 21.5625 26.648438 21 25.757813 21 24 C 21 22.769531 21.402344 21.929688 22.203125 21.453125 C 22.285156 23.035156 23 24.941406 25.34375 25.824219 C 25.457031 25.867188 25.578125 25.890625 25.691406 25.890625 C 26.097656 25.890625 26.480469 25.640625 26.628906 25.242188 C 26.824219 24.722656 26.5625 24.148438 26.046875 23.953125 C 24.355469 23.316406 24.152344 21.875 24.191406 21 Z "></path>
            </svg>
          </div>
          <span>Action B</span>
        </action-inner>
      </swipe-action>
    </action-list>
    <item-inner>
      <img class="img-circle media-object pull-left" src="https://maurice-conrad.eu/acting/images/big-narrenkaefig-1.jpg" width="32" height="32" alt="" />
      <div class="media-body">
        <strong>Swipe Me Both!</strong>
        <p>Swipe me to left or right!
      </div>
    </item-inner>
    <action-list role="right">
      <swipe-action style="background-color: #1aa431;">
        <action-inner>
          <div class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="100%" height="100%">
              <path style="fill: #fff;" d="M 24.984375 -0.013671875 A 1.0001 1.0001 0 0 0 24 1 L 24 8.5859375 L 19.707031 4.2929688 A 1.0001 1.0001 0 0 0 18.990234 3.9902344 A 1.0001 1.0001 0 0 0 18.292969 5.7070312 L 24 11.414062 L 24 23.269531 L 13.734375 17.341797 L 11.646484 9.5449219 A 1.0001 1.0001 0 0 0 10.699219 8.7910156 A 1.0001 1.0001 0 0 0 9.7148438 10.0625 L 11.285156 15.927734 L 4.7148438 12.134766 A 1.0001 1.0001 0 0 0 4.2402344 11.992188 A 1.0001 1.0001 0 0 0 4.140625 11.994141 A 1.0001 1.0001 0 0 0 3.7148438 13.865234 L 10.285156 17.658203 L 4.421875 19.230469 A 1.0001 1.0001 0 1 0 4.9394531 21.162109 L 12.736328 19.074219 L 23.001953 25 L 12.736328 30.925781 L 4.9394531 28.837891 A 1.0001 1.0001 0 0 0 4.6425781 28.800781 A 1.0001 1.0001 0 0 0 4.421875 30.769531 L 10.285156 32.341797 L 3.7148438 36.134766 A 1.0001 1.0001 0 1 0 4.7148438 37.865234 L 11.285156 34.072266 L 9.7148438 39.9375 A 1.0001 1.0001 0 1 0 11.646484 40.455078 L 13.734375 32.658203 L 24 26.730469 L 24 38.585938 L 18.292969 44.292969 A 1.0001 1.0001 0 1 0 19.707031 45.707031 L 24 41.414062 L 24 49 A 1.0001 1.0001 0 1 0 26 49 L 26 41.414062 L 30.292969 45.707031 A 1.0001 1.0001 0 1 0 31.707031 44.292969 L 26 38.585938 L 26 26.730469 L 36.265625 32.658203 L 38.353516 40.455078 A 1.0001 1.0001 0 1 0 40.285156 39.9375 L 38.714844 34.072266 L 45.285156 37.865234 A 1.0001 1.0001 0 1 0 46.285156 36.134766 L 39.714844 32.341797 L 45.578125 30.769531 A 1.0001 1.0001 0 0 0 45.328125 28.800781 A 1.0001 1.0001 0 0 0 45.060547 28.837891 L 37.263672 30.925781 L 26.998047 25 L 37.263672 19.074219 L 45.060547 21.162109 A 1.0001 1.0001 0 1 0 45.578125 19.230469 L 39.714844 17.658203 L 46.285156 13.865234 A 1.0001 1.0001 0 0 0 45.830078 11.994141 A 1.0001 1.0001 0 0 0 45.285156 12.134766 L 38.714844 15.927734 L 40.285156 10.0625 A 1.0001 1.0001 0 0 0 39.269531 8.7910156 A 1.0001 1.0001 0 0 0 38.353516 9.5449219 L 36.265625 17.341797 L 26 23.269531 L 26 11.414062 L 31.707031 5.7070312 A 1.0001 1.0001 0 1 0 30.292969 4.2929688 L 26 8.5859375 L 26 1 A 1.0001 1.0001 0 0 0 24.984375 -0.013671875 z"></path>
            </svg>
          </div>
          <span>Action A</span>
        </action-inner>
      </swipe-action>
      <swipe-action style="background-color: #464646;">
        <action-inner>
          <div class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" version="1.1" width="100%" height="100%">
              <path style="fill: #fff;" d="M 21 0 L 8 4.625 C 7.449219 4.808594 7 5.417969 7 5.96875 L 7 17.78125 C 6.546875 17.707031 6.035156 17.714844 5.5 17.84375 C 3.566406 18.316406 2 20.0625 2 21.71875 C 2 23.375 3.566406 24.316406 5.5 23.84375 C 7.410156 23.378906 8.960938 21.699219 9 20.0625 C 9 20.042969 9 20.019531 9 20 L 9 8.28125 L 20 4.34375 L 20 14.78125 C 19.546875 14.707031 19.035156 14.714844 18.5 14.84375 C 16.566406 15.316406 15 17.0625 15 18.71875 C 15 20.375 16.566406 21.316406 18.5 20.84375 C 20.433594 20.371094 22 18.65625 22 17 L 22 1 C 22 0.449219 21.550781 0 21 0 Z "></path>
            </svg>
          </div>
          <span>Action B</span>
        </action-inner>
      </swipe-action>
      <swipe-action style="background-color: #c514db;">
        <action-inner>
          <div class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" version="1.1" width="100%" height="100%">
              <path style="fill: #fff;" d="M 3 4 C 1.347656 4 0 5.347656 0 7 L 0 33.09375 C 1.464844 25.296875 3.105469 16.550781 3.1875 16.125 C 3.695313 13.535156 5.648438 12 8.4375 12 L 47 12 L 47 11 C 47 9.347656 45.652344 8 44 8 L 18.03125 8 C 17.753906 7.898438 17.183594 6.992188 16.875 6.5 C 16.105469 5.273438 15.316406 4 14 4 Z M 8.4375 14 C 7.15625 14 5.5625 14.449219 5.15625 16.53125 C 5.027344 17.179688 1.132813 37.910156 0 43.9375 L 0 44 C 0 45.652344 1.347656 47 3 47 L 42 47 C 43.621094 47 44.945313 45.703125 45 44.09375 L 49.96875 17.1875 L 50 17 C 50 15.347656 48.652344 14 47 14 Z "></path>
            </svg>
          </div>
          <span>Action C</span>
        </action-inner>
      </swipe-action>
    </action-list>
  </list-item>
  <list-item>
    <action-list role="left">
      <swipe-action style="background-color: #fb9700;">
        <action-inner>
          <div class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" version="1.1" width="100%" height="100%">
              <path style="fill: #fff;" d="M 16.5 0 C 12.359375 0 9 1.789063 9 4 C 9 6.210938 12.359375 8 16.5 8 C 20.640625 8 24 6.210938 24 4 C 24 1.789063 20.640625 0 16.5 0 Z M 9.0625 5.5 C 9.023438 5.664063 9 5.828125 9 6 L 9 7 C 9 7.847656 9.496094 8.632813 10.34375 9.28125 C 11.804688 9.578125 13.066406 10.101563 14.03125 10.78125 C 14.800781 10.925781 15.636719 11 16.5 11 C 20.640625 11 24 9.210938 24 7 L 24 6 C 24 5.828125 23.976563 5.664063 23.9375 5.5 C 23.476563 7.472656 20.324219 9 16.5 9 C 12.675781 9 9.523438 7.472656 9.0625 5.5 Z M 23.9375 8.5 C 23.476563 10.472656 20.324219 12 16.5 12 C 16.078125 12 15.683594 11.972656 15.28125 11.9375 C 15.746094 12.558594 15.996094 13.265625 16 14 C 16.164063 14.003906 16.332031 14 16.5 14 C 20.640625 14 24 12.210938 24 10 L 24 9 C 24 8.828125 23.976563 8.664063 23.9375 8.5 Z M 7.5 10 C 3.359375 10 0 11.789063 0 14 C 0 16.210938 3.359375 18 7.5 18 C 11.640625 18 15 16.210938 15 14 C 15 11.789063 11.640625 10 7.5 10 Z M 23.9375 11.5 C 23.476563 13.472656 20.324219 15 16.5 15 C 16.332031 15 16.164063 15.003906 16 15 L 16 17 C 16.164063 17.003906 16.332031 17 16.5 17 C 20.640625 17 24 15.210938 24 13 L 24 12 C 24 11.828125 23.976563 11.664063 23.9375 11.5 Z M 23.9375 14.5 C 23.476563 16.472656 20.324219 18 16.5 18 C 16.332031 18 16.164063 18.003906 16 18 L 16 20 C 16.164063 20.003906 16.332031 20 16.5 20 C 20.640625 20 24 18.210938 24 16 L 24 15 C 24 14.828125 23.976563 14.664063 23.9375 14.5 Z M 0.0625 15.5 C 0.0234375 15.664063 0 15.828125 0 16 L 0 17 C 0 19.210938 3.359375 21 7.5 21 C 11.640625 21 15 19.210938 15 17 L 15 16 C 15 15.828125 14.976563 15.664063 14.9375 15.5 C 14.476563 17.472656 11.324219 19 7.5 19 C 3.675781 19 0.523438 17.472656 0.0625 15.5 Z M 0.0625 18.5 C 0.0234375 18.664063 0 18.828125 0 19 L 0 20 C 0 22.210938 3.359375 24 7.5 24 C 11.640625 24 15 22.210938 15 20 L 15 19 C 15 18.828125 14.976563 18.664063 14.9375 18.5 C 14.476563 20.472656 11.324219 22 7.5 22 C 3.675781 22 0.523438 20.472656 0.0625 18.5 Z "></path>
            </svg>
          </div>
          <span>Action A</span>
        </action-inner>
      </swipe-action>
      <swipe-action style="background-color: #0061b1;">
        <action-inner>
          <div class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" version="1.1" width="100%" height="100%">
              <path style="fill: #fff;" d="M 49.605469 0.21875 C 49.296875 -0.0234375 48.875 -0.0585938 48.527344 0.128906 L 0.527344 26.128906 C 0.179688 26.316406 -0.0234375 26.695313 0.015625 27.089844 C 0.0507813 27.484375 0.316406 27.820313 0.691406 27.941406 L 14.335938 32.394531 L 13.015625 45.902344 C 12.972656 46.332031 13.210938 46.738281 13.605469 46.90625 C 13.730469 46.964844 13.867188 46.992188 14 46.992188 C 14.277344 46.992188 14.550781 46.875 14.742188 46.65625 L 23.347656 36.933594 L 36.304688 49.707031 C 36.492188 49.890625 36.742188 49.992188 37 49.992188 C 37.089844 49.992188 37.179688 49.976563 37.269531 49.953125 C 37.609375 49.859375 37.875 49.585938 37.960938 49.242188 L 49.960938 1.242188 C 50.054688 0.859375 49.917969 0.457031 49.605469 0.21875 Z M 16.34375 32.210938 L 35.855469 16.433594 L 22.558594 34.84375 L 15.28125 43.058594 Z "></path>
            </svg>
          </div>
          <span>Action B</span>
        </action-inner>
      </swipe-action>
    </action-list>
    <item-inner>
      <img class="img-circle media-object pull-left" src="https://maurice-conrad.eu/acting/images/big-narrenkaefig-6.jpg" width="32" height="32" alt="" />
      <div class="media-body">
        <strong>Swipe Me Left!</strong>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </item-inner>
  </list-item>
  <list-item>
    <item-inner>
      <img class="img-circle media-object pull-left" src="https://maurice-conrad.eu/acting/images/big-rothaarigefrau-1.jpg" width="32" height="32" alt="" />
      <div class="media-body">
        <strong>Swipe Me Right!</strong>
        <p>Lorem ipsum dolor sit amet dolor</p>
      </div>
    </item-inner>
    <action-list role="right">
      <swipe-action style="background-color: #cdcf5a;">
        <action-inner>
          <div class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="100%" height="100%">
              <path style="fill: #fff;" d="M 15 2 C 14.448 2 14 2.448 14 3 L 14 3.171875 C 14 3.649875 13.663406 4.0763437 13.191406 4.1523438 C 12.962406 4.1893437 12.735719 4.2322031 12.511719 4.2832031 C 12.047719 4.3892031 11.578484 4.1265 11.396484 3.6875 L 11.330078 3.53125 C 11.119078 3.02125 10.534437 2.7782344 10.023438 2.9902344 C 9.5134375 3.2012344 9.2704219 3.785875 9.4824219 4.296875 L 9.5488281 4.4570312 C 9.7328281 4.8970313 9.5856875 5.4179219 9.1796875 5.6699219 C 8.9836875 5.7919219 8.7924688 5.9197344 8.6054688 6.0527344 C 8.2174688 6.3297344 7.68075 6.2666875 7.34375 5.9296875 L 7.2226562 5.8085938 C 6.8316562 5.4175937 6.1985937 5.4175938 5.8085938 5.8085938 C 5.4185938 6.1995938 5.4185938 6.8326563 5.8085938 7.2226562 L 5.9296875 7.34375 C 6.2666875 7.68075 6.3297344 8.2164688 6.0527344 8.6054688 C 5.9197344 8.7924687 5.7919219 8.9836875 5.6699219 9.1796875 C 5.4179219 9.5856875 4.8960781 9.7337812 4.4550781 9.5507812 L 4.296875 9.484375 C 3.786875 9.273375 3.2002813 9.5153906 2.9882812 10.025391 C 2.7772813 10.535391 3.0192969 11.120031 3.5292969 11.332031 L 3.6855469 11.396484 C 4.1245469 11.578484 4.3892031 12.047719 4.2832031 12.511719 C 4.2322031 12.735719 4.1873906 12.962406 4.1503906 13.191406 C 4.0753906 13.662406 3.649875 14 3.171875 14 L 3 14 C 2.448 14 2 14.448 2 15 C 2 15.552 2.448 16 3 16 L 3.171875 16 C 3.649875 16 4.0763437 16.336594 4.1523438 16.808594 C 4.1893437 17.037594 4.2322031 17.264281 4.2832031 17.488281 C 4.3892031 17.952281 4.1265 18.421516 3.6875 18.603516 L 3.53125 18.669922 C 3.02125 18.880922 2.7782344 19.465563 2.9902344 19.976562 C 3.2012344 20.486563 3.785875 20.729578 4.296875 20.517578 L 4.4570312 20.451172 C 4.8980312 20.268172 5.418875 20.415312 5.671875 20.820312 C 5.793875 21.016313 5.9206875 21.208484 6.0546875 21.396484 C 6.3316875 21.784484 6.2686406 22.321203 5.9316406 22.658203 L 5.8085938 22.779297 C 5.4175937 23.170297 5.4175938 23.803359 5.8085938 24.193359 C 6.1995938 24.583359 6.8326562 24.584359 7.2226562 24.193359 L 7.3457031 24.072266 C 7.6827031 23.735266 8.2174688 23.670266 8.6054688 23.947266 C 8.7934688 24.081266 8.9856406 24.210031 9.1816406 24.332031 C 9.5866406 24.584031 9.7357344 25.105875 9.5527344 25.546875 L 9.4863281 25.705078 C 9.2753281 26.215078 9.5173438 26.801672 10.027344 27.013672 C 10.537344 27.224672 11.121984 26.982656 11.333984 26.472656 L 11.398438 26.316406 C 11.580438 25.877406 12.049672 25.61275 12.513672 25.71875 C 12.737672 25.76975 12.964359 25.814562 13.193359 25.851562 C 13.662359 25.924562 14 26.350125 14 26.828125 L 14 27 C 14 27.552 14.448 28 15 28 C 15.552 28 16 27.552 16 27 L 16 26.828125 C 16 26.350125 16.336594 25.923656 16.808594 25.847656 C 17.037594 25.810656 17.264281 25.767797 17.488281 25.716797 C 17.952281 25.610797 18.421516 25.8735 18.603516 26.3125 L 18.669922 26.46875 C 18.880922 26.97875 19.465563 27.221766 19.976562 27.009766 C 20.486563 26.798766 20.729578 26.214125 20.517578 25.703125 L 20.451172 25.542969 C 20.268172 25.101969 20.415312 24.581125 20.820312 24.328125 C 21.016313 24.206125 21.208484 24.079312 21.396484 23.945312 C 21.784484 23.668312 22.321203 23.731359 22.658203 24.068359 L 22.779297 24.191406 C 23.170297 24.582406 23.803359 24.582406 24.193359 24.191406 C 24.583359 23.800406 24.584359 23.167344 24.193359 22.777344 L 24.072266 22.654297 C 23.735266 22.317297 23.670266 21.782531 23.947266 21.394531 C 24.081266 21.206531 24.210031 21.014359 24.332031 20.818359 C 24.584031 20.413359 25.105875 20.264266 25.546875 20.447266 L 25.705078 20.513672 C 26.215078 20.724672 26.801672 20.482656 27.013672 19.972656 C 27.224672 19.462656 26.982656 18.878016 26.472656 18.666016 L 26.316406 18.601562 C 25.877406 18.419563 25.61275 17.950328 25.71875 17.486328 C 25.76975 17.262328 25.814562 17.035641 25.851562 16.806641 C 25.924562 16.337641 26.350125 16 26.828125 16 L 27 16 C 27.552 16 28 15.552 28 15 C 28 14.448 27.552 14 27 14 L 26.828125 14 C 26.350125 14 25.923656 13.663406 25.847656 13.191406 C 25.810656 12.962406 25.767797 12.735719 25.716797 12.511719 C 25.610797 12.047719 25.8735 11.578484 26.3125 11.396484 L 26.46875 11.330078 C 26.97875 11.119078 27.221766 10.534437 27.009766 10.023438 C 26.798766 9.5134375 26.214125 9.2704219 25.703125 9.4824219 L 25.542969 9.5488281 C 25.101969 9.7318281 24.581125 9.5846875 24.328125 9.1796875 C 24.206125 8.9836875 24.079312 8.7915156 23.945312 8.6035156 C 23.668312 8.2155156 23.731359 7.6787969 24.068359 7.3417969 L 24.191406 7.2207031 C 24.582406 6.8297031 24.582406 6.1966406 24.191406 5.8066406 C 23.800406 5.4156406 23.167344 5.4156406 22.777344 5.8066406 L 22.65625 5.9296875 C 22.31925 6.2666875 21.782531 6.3316875 21.394531 6.0546875 C 21.206531 5.9206875 21.014359 5.7919219 20.818359 5.6699219 C 20.413359 5.4179219 20.266219 4.8960781 20.449219 4.4550781 L 20.515625 4.296875 C 20.726625 3.786875 20.484609 3.2002812 19.974609 2.9882812 C 19.464609 2.7772813 18.879969 3.0192969 18.667969 3.5292969 L 18.601562 3.6855469 C 18.419563 4.1245469 17.950328 4.3892031 17.486328 4.2832031 C 17.262328 4.2322031 17.035641 4.1873906 16.806641 4.1503906 C 16.336641 4.0753906 16 3.649875 16 3.171875 L 16 3 C 16 2.448 15.552 2 15 2 z M 15 7 C 19.078645 7 22.438586 10.054876 22.931641 14 L 16.728516 14 A 2 2 0 0 0 15 13 A 2 2 0 0 0 14.998047 13 L 11.896484 7.625 C 12.850999 7.222729 13.899211 7 15 7 z M 10.169922 8.6328125 L 13.269531 14 A 2 2 0 0 0 13 15 A 2 2 0 0 0 13.269531 15.996094 L 10.167969 21.365234 C 8.2464258 19.903996 7 17.600071 7 15 C 7 12.398945 8.2471371 10.093961 10.169922 8.6328125 z M 16.730469 16 L 22.931641 16 C 22.438586 19.945124 19.078645 23 15 23 C 13.899211 23 12.850999 22.777271 11.896484 22.375 L 14.998047 17 A 2 2 0 0 0 15 17 A 2 2 0 0 0 16.730469 16 z"></path>
            </svg>
          </div>
          <span>Action A</span>
        </action-inner>
      </swipe-action>
      <swipe-action style="background-color: #ff1313;">
        <action-inner>
          <div class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" version="1.1" width="100%" height="100%">
              <path style="fill: #fff;" d="M 42 5 L 32 5 L 32 3 C 32 1.347656 30.652344 0 29 0 L 21 0 C 19.347656 0 18 1.347656 18 3 L 18 5 L 8 5 C 7.449219 5 7 5.449219 7 6 C 7 6.550781 7.449219 7 8 7 L 9.085938 7 L 12.695313 47.515625 C 12.820313 48.90625 14.003906 50 15.390625 50 L 34.605469 50 C 35.992188 50 37.175781 48.90625 37.300781 47.515625 L 40.914063 7 L 42 7 C 42.554688 7 43 6.550781 43 6 C 43 5.449219 42.554688 5 42 5 Z M 20 44 C 20 44.554688 19.550781 45 19 45 C 18.449219 45 18 44.554688 18 44 L 18 11 C 18 10.449219 18.449219 10 19 10 C 19.550781 10 20 10.449219 20 11 Z M 20 3 C 20 2.449219 20.449219 2 21 2 L 29 2 C 29.550781 2 30 2.449219 30 3 L 30 5 L 20 5 Z M 26 44 C 26 44.554688 25.550781 45 25 45 C 24.449219 45 24 44.554688 24 44 L 24 11 C 24 10.449219 24.449219 10 25 10 C 25.550781 10 26 10.449219 26 11 Z M 32 44 C 32 44.554688 31.554688 45 31 45 C 30.445313 45 30 44.554688 30 44 L 30 11 C 30 10.449219 30.445313 10 31 10 C 31.554688 10 32 10.449219 32 11 Z "></path>
            </svg>
          </div>
          <span>Action B</span>
        </action-inner>
      </swipe-action>
    </action-list>
  </list-item>
</list-group>
...

API

Methods

All methods are provided by the <list-item> element.

open

To open a <action-list> list, use the method open of your <list-item>. The mathematical values Infinity & -Infinity are used here for left and right because the internal calculcations work in this way and it is much easier.

myListItem.open(Infinity); // Infinity for right opening or -Infinity for left opening

If you are going to open a <action-list> which does not exist, an Error will occur.

close

To close the current open <swipe-actions> which can only be a single one, just call the close method on your <action-list>.

myListItem.close();

If no <action-list> is currently open, an Error will occur.

Events

The swipe event is fired directly on the currently opened or closed <action-list> but it is bubbling up. Therefore you are abled to listen to swipe event on the <list-item> or on the whole <list-group> instead.

Local

myActionList.addEventListener("swipe", function(event) {
  console.log(event);
});

Global Level 2

myListItem.addEventListener("swipe", function(event) {
  console.log(event);
});

Global Level 1

myListGroup.addEventListener("swipe", function(event) {
  console.log(event);
});

To understand the event, just try it out :-)