How to create slide to unloack button using ion-item-sliding

Vikas Jadhav 0
Viewed 22

Can we create button like below using ion-item-sliding

enter image description here

I'm not sure if it is possible or not in Ionic if anyone knows how to achieve this using ion-item-sliding it will be really helpful.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Action Sheet</title>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
  <style>
     :root {
      --ion-safe-area-top: 20px;
      --ion-safe-area-bottom: 22px;
    }
  </style>
  <script type="module">
    import { actionSheetController } from 'https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/index.esm.js'; window.actionSheetController = actionSheetController;
  </script>
</head>

<body>
  <ion-app>
    <ion-content fullscreen class="ion-padding">

      <ion-item-sliding>
        <ion-item-options side="start">
          <ion-item-option>Favorite</ion-item-option>
          <ion-item-option color="danger">Delete</ion-item-option>
        </ion-item-options>

        <ion-item>
          <ion-label>Sliding Item with Start Options</ion-label>
        </ion-item>
      </ion-item-sliding>
    </ion-content>
  </ion-app>


</body>

</html>

ionic4 css html
1 Answers

Yes you could use the ion-item-sliding element or create your own custom element using gestures. Anyway, here is a ion-item-sliding solution.

  const swipeItem = document.querySelector('#swipe-item');
  const swipeOptions = document.querySelector('#swipe-options');
  const swipeOption = document.querySelector('#swipe-option');
  const lockIconTarget = document.querySelector('#lock-icon-target');
  const lockIconActual = document.querySelector('#lock-icon-actual');
  const swipeLabel = document.querySelector('#swipe-label');
  let unlocked = false;

  const toggleLock = () => {
    swipeItem.close();
    unlocked = !unlocked;
    lockIconTarget.setAttribute('name', unlocked ? 'lock-closed-outline' : 'lock-open-outline');
    lockIconActual.setAttribute('name', unlocked ? 'lock-open-outline' : 'lock-closed-outline');
    swipeLabel.innerText = unlocked ? 'Swipe to deactiviate' : 'Swipe to activiate';
  };

  swipeOptions.addEventListener('ionSwipe', toggleLock);
  swipeOption.addEventListener('click', toggleLock);
<ion-app mode="md">
  <ion-content>
    <ion-content>
      <ion-list>
        <ion-item-sliding id="swipe-item">
          <ion-item-options id="swipe-options" side="start">
            <ion-item-option id="swipe-option" expandable>
              <ion-icon id="lock-icon-target" slot="icon-only" name="lock-open-outline"></ion-icon>
            </ion-item-option>
          </ion-item-options>

          <ion-item>
            <ion-icon id="lock-icon-actual" slot="start" name="lock-closed-outline"></ion-icon>
            <ion-label id="swipe-label">Swipe to activiate</ion-label>
          </ion-item>
      </ion-list>
    </ion-content>
  </ion-content>
</ion-app>

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />

Just a quick scribble. It can look cleaner if you use a framework like Angular. You could also remove the icon from swipe option and only keep the icon on inner item. etc...

The core solution is to use expandable on ion-item-option and the ionSwipe event.

userhGOC0
Related