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">
<body>
  <ion-app>
    <ion-content>
        <ion-fab horizontal="end" vertical="bottom">
          <ion-fab-button size="small">
            <ion-icon name="add"></ion-icon>
          </ion-fab-button>
        </ion-fab>

        <ion-drawer>
          <h1>Header</h1>
          <p hide-on-bottom>Content</p> 
        </ion-drawer>

        <ion-button expand="block" color="danger" onclick="presentDrawer()">Present Drawer</ion-button>
        <ion-button expand="block" onclick="hideDrawer()">Hide Drawer</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>
    </ion-content>
  </ion-app>
</body>
</html>

CSS

ion-fab {
  margin-bottom: 120px;
}

ion-drawer {
  margin: 0 20px;
}

JavaScript

var drawer = new CupertinoPane('ion-drawer', { 
  followerElement: 'ion-fab',
  buttonClose: false,
  initialBreak: 'bottom',
  breaks: {
    top: { enabled: 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');
};