JSFiddle - React, Tailwind, and code Playground

by romantonoff

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css">
<script src="https://unpkg.com/cupertino-pane/dist/cupertino-pane.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<html mode="ios">
<ion-app>
  <ion-content scroll-y="false">
      <ion-drawer>
        <div class="content">
          <h1>Header</h1>
          <p>This is good example of Cupertino Pane with inversed direction.</p>
          <p>Events switched into <strong>top-to-bottom</strong></p>
        </div>
      </ion-drawer>

      <div class="buttons-container">
        <ion-button expand="block" color="danger" onclick="presentDrawer()">Present Drawer</ion-button>
        <ion-button expand="block" color="danger" onclick="destroyDrawer()">Destroy Drawer</ion-button>
        <ion-button expand="block" onclick="hideDrawer()">Hide Drawer</ion-button>
        <ion-button expand="block" color="secondary" onclick="setTopDrawer()">Set Top</ion-button>
        <ion-button expand="block" color="secondary" onclick="setMiddleDrawer()">Set Middle</ion-button>
        <ion-button expand="block" color="secondary" onclick="setBottomDrawer()">Set Bottom</ion-button>    
      </div>
  </ion-content>
</ion-app>
</html>

CSS

ion-drawer, ion-extra-drawer { 
  padding: 0 20px; 
}

ion-slides { 
  height: 150px; 
}

.buttons-container {
  overflow: hidden !important;
  display: flex;
  height: 100vh;
  flex-direction: column;
  justify-content: flex-end;
}

.content {

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 30px;
  height: 100%;
}

h1, p {
  margin-bottom: 0 !important;
}

JavaScript

let drawer = new CupertinoPane('ion-drawer', { 
    inverse: true,
    breaks: {
      top: { enabled: true, height: 500, bounce: false },
      middle: { enabled: true, height: 300, bounce: false },
      bottom: { enabled: true, height: 100, bounce: false },
    }
});

window.onload = async function () {
  await document.querySelector('ion-app').componentOnReady();
  presentDrawer();
}

async function presentDrawer() {
  drawer.present({animate: true});
};

async function destroyDrawer() {
  drawer.destroy({animate: true});
};

async function hideDrawer() {
  drawer.hide();
};

async function isHiddenDrawer() {
    console.log(await drawer.isHidden());
};

async function setTopDrawer() {
  drawer.moveToBreak('top');
};

async function setMiddleDrawer() {
  drawer.moveToBreak('middle');
};

async function setBottomDrawer() {
  drawer.moveToBreak('bottom');
};

async function showBackdrop() {
  console.log(drawer);
  drawer.backdrop({show: true});
}

async function hideBackdrop() {
  drawer.backdrop({show: false});
}