Cupertino Panes

Appearance

Getting Started ​

Install via NPM ​

sh
npm install cupertino-pane

Use from CDN ​

If you don't want to include Cupertino Pane files in your project, you may use it from CDN. The following files are available:

html
<script src="https://unpkg.com/cupertino-pane/dist/cupertino-pane.js"></script>
<script src="https://unpkg.com/cupertino-pane/dist/cupertino-pane.min.js"></script>

Include Files To App/Website ​

html
<!DOCTYPE html>
<html lang="en">
<body>
    ...
    <script src="path/to/cupertino-pane.min.js"></script>
</body>
</html>

Add HTML Layout ​

html
<div class="cupertino-pane">
    <h1>Header</h1>
    <div class="content">Content</div>    
</div>

Additional CSS Styles ​

css
.cupertino-pane {
    margin: 20px;
}

Initialize Cupertino Pane ​

html
<body>
  ...
  <script>
  window.onload = function () {
    var myPane = new CupertinoPane(
      '.cupertino-pane', // Pane container selector
      { 
        parentElement: 'body', // Parent container
        breaks: {
            middle: { enabled: true, height: 300, bounce: true },
            bottom: { enabled: true, height: 80 },
        },
        events: {
          onDrag: () => console.log('Drag event')
        }
      }
    );
    myPane.present({animate: true}).then(res => {...});
  };
  </script>
</body>

jQuery example ​

javascript
$(document).ready(function () {
  //initialize pane when document ready
  var myPane = new CupertinoPane('.cupertino-pane', { /* ... */ });
  myPane.present({animate: true}).then(...);
});

As an ES module ​

Cupertino Pane package comes with ES module version which can be used where supported or with bundlers like Webpack or Rollup:

javascript
import { CupertinoPane, CupertinoSettings } from 'cupertino-pane';

let settings: CupertinoSettings = { /* ... */ };
let myPane = new CupertinoPane('.cupertino-pane', settings);
    await myPane.present({animate: true});

Class creation ​

You can pass html element or string selector to class constructor

javascript
// String selector
new CupertinoPane('.cupertino-pane');

// HTML element
let element = document.querySelector('.cupertino-pane');
new CupertinoPane(element); // HTMLElement