Bottom drawer tutorial

Leadership UI

Let's make a quick look up on most modern and famous applications:

• Apple Music, Apple Maps, Apple Stocks, Google Maps, Asana, Facebook, Slack and others...

No doubts - these all are leaders in mobile user interfaces. Within revolutionary technologies, new revolutionary interfaces appears, with new components, to maintain these techs.

Revolutionary components

In meantime the most demanded revolutionary component is Bottom drawer.
Bottom drawer becomes the main control element of interfaces in mobile applications.

Pretty obviously: Hybrid, progressive and web application developers needs own Bottom drawer solution in a web and cordova apps.

Requirements and package description

In the next example we will use Cupertino Pane

Cupertino Pane is great modern slide-over pane with touch technologies.
Lightweight, Multiplatform, Open Source. For progressive applications.

Package is perfectly fit for React/Angular/Vue cases, but all javascript frameworks are supported out of the box.

Getting Started

Install via NPM

npm install cupertino-pane --save

Add HTML Layout

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

Initialization

import { CupertinoPane } from 'cupertino-pane';

const drawer = new CupertinoPane('.cupertino-pane', { /* ... */ });
drawer.present({ animated: true });

Conclusions

Simple package make new generation component ported from native to web and javascript world. That's pretty easy to use it!

Comments

[BeniBen]

excellent work i have been looking for something similar for months, you could also create a little vanilla JS library to simulate physics and drag to easily create sliders and carousels
💡🖒👍👓

[Roman Antonov]

Thank you! Welcome!