JSFiddle - React, Tailwind, and code Playground

by romantonoff

HTML

<script src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<script src="https://unpkg.com/cupertino-pane/dist/cupertino-pane.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css">
<html mode="ios">
<body>
<ion-app>
  <ion-content>
      <ion-drawer>
        <h1 class="ion-padding">Header</h1>
        
        <div class="list" overflow-y>
        <ion-list hide-on-bottom>
          <ion-list-header>
            Recent Conversations
          </ion-list-header>
  
          <ion-item>
            <ion-avatar slot="start">
              <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
            </ion-avatar>
            <ion-label>
              <h2>Finn</h2>
              <h3>I'm a big deal</h3>
              <p>Listen, I've had a pretty messed up day...</p>
            </ion-label>
          </ion-item>
  
          <ion-item>
            <ion-avatar slot="start">
              <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
            </ion-avatar>
            <ion-label>
              <h2>Han</h2>
              <h3>Look, kid...</h3>
              <p>I've got enough on my plate as it is, and I...</p>
            </ion-label>
          </ion-item>
  
          <ion-item>
            <ion-avatar slot="start">
              <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
            </ion-avatar>
            <ion-label>
              <h2>Rey</h2>
              <h3>I can handle myself</h3>
              <p>You will remove these restraints and leave...</p>
            </ion-label>
          </ion-item>
  
          <ion-item>
            <ion-avatar slot="start">
              <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
            </ion-avatar>
            <ion-label>
              <h2>Luke</h2>
              <h3>Your thoughts betray you</h3>
              <p>I feel the good in you,...

JavaScript

var drawer = new CupertinoPane('ion-drawer');

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');
};