DEV Community: Roman Antonov

Much more sweetest advantages of using Panes for your next Front-end project 🍰

Roman Antonov — Tue, 16 Aug 2022 13:52:06 +0000

Have you ever imagined how to create such a sophisticated user interface, that using on the front screen of the Tesla Model S plaid?

A bunch of flying panels and floating windows help to make your control experience smooth in all aspects. Moreover, the iPhone has almost become an almost natural continuous of your body and consciousness.

Panes is a key that opens a door for future interfaces where your thoughts are integrated with the program.

One Instance – thousands of solutions

The Panes are only provided for you in one single instance. You have only access to control your created instances with public methods and properties.

Control Pane instance like a spaceship or car. You can create many different instances, but with the same management interface. As many other front-end frameworks widely spread their duties to different components and tons of elements. Panes only focus on one.

This is the main concept of single-instance architecture for libraries and tools that we are strictly considering.

TIP 🍰: We focus on one type of instance and polish it as much as possible.

You are free to imagine, create, and use thousands of different variations with primary Pane instances. During the development of Panes, every millisecond of interaction is matter. No timeouts and timers should be, only natural asynchronous flow. What should we use in case of each vs in? In Panes, we will use for if it makes gestures to be sweetest.

The race is over: Vue, React, Angular, Svelte, JQuery

You can create react app or angular app, framework racing is not mattered anymore. Panes is would be the best framework-agnostic UI solution. Angular easily imports Panes to any controller without additional providers.

No excessive configuration is needed for module import. Vuejs also integrates Panes to any component with a few simple steps. Import as a module, create as an instance. JQuery is still here with full support.

The race is over, friendship is a winner. Every good package should have non-invasive import to any framework as an ECMA module or even default javascript AMD bundle.

The new generation of User Interfaces

Look at this simple example and imagine how difficult to realize it with no tools.

Look's quite familiar, isn't it? Have you ever seen something similar? The basis view of this scene was taken as the perfect example, from Bitcoin conf 22" – Presentation of Robinhood application UI/UX updates.

This is the hottest trending view of UI and Design nowadays, at all. Synthwave of the '80s is returned with a new quality of graphic. Fresh and sweetest bright colors: hotpink, hotgreen, with a dark background. But this is just a front makeup. All magic is in the modal window.

There are lots of modern interfaces using different types of floating windows, as you can see. Sophisticated UI is required, anyhow.

TIP 🍰: Such floating Pane you can implement to your interface in minutes, with your content. Just use the config of custom transitions, provided in the sources below.

Pane in this example uses a third-dimensional transition and touch gestures. Moving is intuitive, and fast swiping is automatic and will close the Pane. Drag the Pane with your finger: Pane will follow this Synthwave perspective, going away to the shadow, out of the scene.

How much time you will spend programming such sophisticated user gestures from zero? Also, Pane's behaviors should be smooth and reactive. This was achieved and maintained by hardware acceleration of transitions.

SOURCES
The full scene with Panes is available here
Bitcoin conf 22" – Robinhood application presentation
Scene not used for any commercial purposes.

Sweetest UI enhancement

The biggest piece of the cake here and you must try the gestures and transition of the Panes. In complicated interface planning, there are always obstacles and challenges you must struggle with.

From proper event listener assignments to transition timing functions, all of this stuff is not primary for UI controls but should be in handle.

TIP 🍰: You don't have to worry about gestures at all. We handle it out of the box.

Drag, Drops, Movements, Jumps, and Bounces – these all are predefined and what you will need is only to set up your direction for instances. Of course, for those who like to provide accurate configuration and sophisticated interactions, different public methods are allowed.

Language agnostic

If you're doubts about the top what should you use to create modern UI: typescript vs javascript? Chose what you like. Panes are using TypeScript for its stability, but there are also normal javascript bundles provided for those who prefer old-school javascript writing.

The good and sweetest cherry on the top of Pane's pie – async/await support. This is so huge leap was initiated for the JavaScript world after async/await functions were admitted to use as well as promises. Await for your Panes actions and transitions to be completed, for sure. Get rid of timeouts and callback hells.

Re-usable in full

No limitless for usage Panes next on your any front-end projects. Since you were create a configuration that matches your high fancy tastes, you will be able to use this configuration for any instance further.

Will it be flying transparent bottom panes, or horizontal picture-in-picture-like windows? This is fully re-usable with settings parameters.

TIP 🍰: Created pane design at once will be available in future with same configuration elsewhere.

You can even wrap your ready-to-use panes to your favorite framework component and use it with your minded API.

Modular architecture

Cupertino Panes 1.3.0 was pushed. From this version, the architecture of the whole system was fully modularized. There are different modules available for advanced configuration, transitions, backdrop usage, and other features.

TIP 🍰: Import only modules you are using to save the final bundle size and project budget.

We welcome for all developers to create their modules with different functions and transitions.

Does Panes library, framework, or component ?

The Panes is an Instance wrapped in to package for easy imports and usage. But these massive abilities, that package open for users, surely propose to call Panes a UI framework for sophisticated UI and great UX panels.

Do you wanna see it all in action? Getting started!

This is a little bit type of advertising for free open-source package that I'm proudly present. Thank you for attention 🙏

[Dribbble Challenge] — Coffee Ordering Animation

Roman Antonov — Sun, 14 Jun 2020 14:04:58 +0000

Tutorial level: Beginner/Junior

Motivation

Sometimes, when we surf dribbble, uplabs and similar design clouds, we often find many concepts or prototypes with animations, micro interactions, application flow and so on.
I often find illustrations of mobile apps that are good and interesting, but of course they are still in the form of concept, so therefore, why don't we try to apply them as an interface for applications that we will build next.

Original concept

In the Dribbble Challenge we will try to build an interface for Coffee Ordering, as I found on Dribble.

The flow is quite simple:

User will choose the size of glass
User will place the order to basket
User redirected to the checkout page

Technologies

We will use quite simple technologies stack: HTML + CSS + JavaScript.
Final result can be fit in just one html file.
Of course, you can use SCSS, TypeScript, React, Angular and other tools, but the target of tutorial just a simplest interface demonstration.

Packages

We also will using 2 additional packages:

Ionic Framework — Mobile interfaces and components library
Cupertino Pane — Touch panes and transitions

Let's Build

Firstly, create a simple index.html file in any new folder.
Open file and write default required tags

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Coffee Ordering</title>

   <style>
     <!-- Styles will be placed here -->
   </style>
  </head>
  <body>

    <script>
     <!-- Scripts will be placed here -->
    </script>
  </body>
</html>

I hope you already familiar with html tags and attributes above. If so, continue next, otherwise, take a quick look of html guidelines

Libraries installation

In this step we inject some libraries to our page. Add some lines to your <head>

<head>
    <meta charset="UTF-8">
    <title>Coffee Ordering</title>

    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script>var exports = {"__esModule": true};</script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
    <script nomodule 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"/> 

   <style>
     <!-- Styles will be placed here -->
   </style>
</head>

Note, that we are using all libraries from CDN and then, keep files locally isn't required.

Tag <meta name="viewport"> gives the browser instructions on how to control the page's dimensions and scaling.

And declaration of exports var exports = {"__esModule": true}; will resolve some libraries/environments variable scope issues.

With these all libraries are installed and we can going to developing.

First page state DOM elements

Let's add some new elements into our <body> tag.

<body>
  <ion-app>
  <ion-content scroll-y="false">
  <div class="content">
    <ion-header translucent="true">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-button>
            <ion-icon name="chevron-back-outline"></ion-icon>
            Frappuccino
          </ion-button>
        </ion-buttons>
        <ion-buttons slot="end">
          <ion-button>
            <ion-icon name="heart-outline"></ion-icon>
          </ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <div class="content-body">
      <img src="https://raw.githubusercontent.com/roman-rr/cupertino-pane/master/playground/img/starbucks.png" />
      <h1>Mocha Frappuccino®</h1>
      <p>
        Buttery caramel syrup meets coffee, milk and ice for a rendezvous in the blender.
      </p>
      <div class="line">
        <div class="price">
          £ 
          <div class="big">3</div>
          .45
        </div>
        <div class="sizes">
          <div class="active-frame"></div>
          <div class="size active" onclick="setActive(this, 3, 0, 'S')">
            S
            <ion-icon name="cafe-outline"></ion-icon>
          </div>
          <div class="size" onclick="setActive(this, 5, 1, 'M')">
            M
            <ion-icon name="cafe-outline"></ion-icon>
          </div>
          <div class="size" onclick="setActive(this, 7, 2, 'L')">
            L
            <ion-icon name="cafe-outline"></ion-icon>
          </div>
        </div>
      </div>
      <ion-button id="button-add"
        expand="block" 
        onclick="presentPane();">
        <span class="button-text">Add to Bag</span>
        <ion-icon name="checkmark-outline"></ion-icon>
      </ion-button>
      <div class="draggable">
        <div class="move"></div>
      </div>
    </div>
  </div>
  <ion-content>
  <ion-app>
</body>

All images we will using from CDN also. So, no any more local files needed and tests should be simple.

First page state styles

Add some styles into your <head>.
Styles will describe product information and size picker style.

ion-toolbar {
  --background: #ffffff;
  --border-color: #ffffff;
}

ion-content {
  --background: rgb(0, 112, 74);
}

.content {
  background: #ffffff;
  height: 100%;
  border-radius: 0 0 30px 30px;
  border-width: 1px;
  border: 1px solid #ffffff;
}

ion-toolbar ion-button {
  --color: #292929;
}

.content-body {
  padding-left: 20px;
  padding-right: 20px;
}

.content-body h1 {
  margin-top: 30px;
}

.content-body p {
  color: #828282;
  font-size: 14px;
  line-height: 20px;
}

.content-body img {
  display: block;
  max-width: 100%;
  margin: auto;
  margin-top: 10px;
}

.content-body ion-button {
  margin-left: 0;
  margin-right: 0;
  --border-radius: 30px;
  font-weight: 600;
  --background: rgb(0, 112, 74);
  margin-top: 15px;
}

.content-body ion-button:active {
  --background: rgb(39, 92, 65);
}

.content-body .price {
  display: flex;
  align-items: center;
  font-size: 26px;
  font-weight: 600;
  height: 60px;
  margin-left: 5px;
}

.content-body .price .big {
  margin-left: 5px;
  font-size: 50px;
}

.content-body .line {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}

.content-body .sizes {
   display: flex;
}

.content-body .sizes .size {
  font-size: 11px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #DADADA;
  border-radius: 3px;
  margin-right: 7px;
  color: #DADADA;
  background: rgb(248, 248, 248);
  padding-bottom: 3px;
  transition: all 200ms ease-in-out;
  position: relative;
}    

.content-body .sizes .size.active {
  font-size: 11px;
  background: rgb(232, 240, 236);
  color: rgb(48, 111, 78);
}

.content-body .sizes .active-frame {
  transform: translate3d(0px, 0px, 0px);
  transition: all 200ms ease-in-out;
  border-radius: 3px;
  width: 48px;
  height: 48px;
  position: absolute;
  border: 2px solid rgb(48, 111, 78);
  z-index: 2;
}

.content-body .sizes .size ion-icon {
  position: absolute;
  font-size: 37px;
  margin-top: 6px;
  top: 0;
  left: 2px;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.content-body .draggable {
  padding: 15px; 
  position: absolute; 
  bottom: 0px; 
  left: 0px; 
  right: 0px; 
  margin-left: auto; 
  margin-right: auto; 
  height: 30px;
}

.content-body .draggable .move {
  margin: 0px auto; 
  height: 5px; 
  background: rgba(202, 202, 202, 0.6); 
  width: 50px; 
  border-radius: 4px; 
  backdrop-filter: saturate(180%) blur(20px);
}

Open index.html file in browser and check what we got:

Size picker

On this step, first interface statement should be prepared well. Styles are applied and we can make first interaction works — picking a drink size.
Time to add some scripts into our <script> tag.

<script>
  function setActive(e, n, kfc, s) {
    itemprice = n;
    size = s;
    let frame = document.querySelector('.active-frame ');
    frame.style.transform = `translate3d(${55 * kfc}px, 0px, 0px)`;

    let elems = document.getElementsByClassName('size');
    for (var i = 0; i < elems.length; i++) {
      elems[i].classList.remove('active');
    }
    e.classList.add('active');
    document.getElementsByClassName('big')[0].innerHTML = itemprice;
  }
</script>

Now you can pick any drink size, frame will be moved according with css tranform/transition options, and price is also will be changed dynamically.

Add to Bag

We need to handle "Add to Bag" button and Pane opening.

Important part to understand is how we imitate pane behavior on our first state content. True moving pane will be appears from bottom, but our content is just "follower" of bottom pane transitions. To imitate this behavior we are intentionally rounded bottom corners of our content and unrounded pane corners.

Prepare DOM elements for bottom pane

<ion-content>
...
<ion-drawer>
  <!-- First step -->
  <div class="first-step">
    <div class="drinks">
      <div class="drink">
        <img src="https://raw.githubusercontent.com/roman-rr/cupertino-pane/master/playground/img/cup-1.png" />
        <div class="size-drink">M</div>
        <div class="bg"></div>
      </div>
      <div class="drink">
        <img src="https://raw.githubusercontent.com/roman-rr/cupertino-pane/master/playground/img/cup-2.png" />
        <div class="size-drink">L</div>
        <div class="bg"></div>
      </div>
    </div>
    <div class="price">
      £ 
      <div class="big">3</div>
      .45
    </div>
  </div>
  <!-- My Bag -->
  <div class="my-bag">
    <h2>My Bag</h2>
    <div class="list">
      <!-- Item 1 -->
      <div class="item">
        <div class="left-side">
          <div class="drink">
            <img src="https://raw.githubusercontent.com/roman-rr/cupertino-pane/master/playground/img/cup-1.png" />
            <div class="bg"></div>
          </div>
          <div class="desc">
            <div class="name">Caramel Frappuccino®</div>
            <div class="size">Size M</div>
            <div class="price">£ 4.85</div>
          </div>
        </div>
        <div class="amount">x 1</div>
      </div>
      <!-- Item 2 -->
      <div class="item">
        <div class="left-side">
          <div class="drink">
            <img src="https://raw.githubusercontent.com/roman-rr/cupertino-pane/master/playground/img/cup-2.png" />
            <div class="bg"></div>
          </div>
          <div class="desc">
            <div class="name">Mocha Frappuccino®</div>
            <div class="size">Size L</div>
            <div class="price">£ 3.70</div>
          </div>
        </div>
        <div class="amount">x 1</div>
      </div>
    </div>
    <div class="footer">
      <div class="line">
        <div class="text">
          Total
        </div>
        <div class="amount">
          £ <span id="total-amount"></span>.70
        </div>
      </div>
      <ion-button expand="block">
        Confirm Order
      </ion-button>
    </div>
  </div>
</ion-drawer>
</ion-content>

Apply a new styles for bottom pane

.pane ion-drawer {
  background: rgb(0, 112, 74) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

ion-drawer .first-step {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 20px;
  margin-right: 20px;
  transition: all 150ms ease-in-out;
  opacity: 1;
}

ion-drawer .first-step .price {
  display: flex;
  align-items: center;
  font-size: 26px;
  font-weight: 600;
  color: #ffffff;
}

ion-drawer .first-step .drinks {
  display: flex;
  justify-content: center;
  align-items: center;
}

.first-step .drinks .drink {
  width: 48px;
  height: 48px;
  border-radius: 3px;
  margin-right: 7px;
  position: relative;
}

.first-step .drinks .bg {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(30, 74, 52);
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

.first-step .drinks .size-drink {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  font-weight: 700;
  right: -3px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.first-step .drinks img {
  display: block;
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  bottom: 6px;
}

My Bag state styles

These styles also should be added in your <styles> block which will make My Bag container looks in order.

ion-drawer .my-bag {
  margin-left: 20px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transition: all 150ms ease-in-out;
}

ion-drawer .my-bag h2 {
  font-weight: 800;
  color: #ffffff;
  margin-top: -60px;
  font-size: 28px;
  will-change: transform, opacity;
  transform: translate3d(0px, 60px, 0px);
  transition: all 150ms ease-in-out;
}

ion-drawer .my-bag .list {
  width: 100%;
  will-change: transform, opacity;
  transform: translate3d(0px, 60px, 0px);
  transition: all 150ms ease-in-out;
}

ion-drawer .my-bag .item {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
}

ion-drawer .my-bag .left-side {
  display: flex;
  align-items: center;
}

ion-drawer .my-bag .drink {
  width: 48px;
  height: 48px;
  border-radius: 3px;
  margin-right: 20px;
  position: relative;
  transform: scale(1.2);
}

.my-bag .drink .bg {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(30, 74, 52);
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

.my-bag .drink img {
  display: block;
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  bottom: 6px;
}

.my-bag .item .amount {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
}

.my-bag .item .desc .name {
  color: #fff;
  font-weight: 600;
  font-size: 17px;
}

.my-bag .item .desc .size {
  color: #fff;
  font-size: 14px;
  margin-top: 2px;
}

.my-bag .item .desc .price {
  color: #88afa2;
  font-size: 16px;
  margin-top: 10px;
}

.my-bag .footer {
  border-top: 1px solid #ffffff2b;
  position: absolute;
  width: calc(100% - 40px);
  bottom: 0;
  padding-bottom: 35px;
  background: #00704a;
}

.my-bag .footer .line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.my-bag .footer .line .text,
.my-bag .footer .line .amount {
  font-weight: 700;
  color: #ffffff;
  font-size: 26px;
}

.my-bag .footer ion-button {
  --border-radius: 30px;
  font-weight: 700;
  --background: #fff;
  color: #00704a;
  font-size: 17px;
  letter-spacing: 0.1px;
}

.my-bag .footer ion-button:active {
  --background: #effffa;
}

Finalize scripts

And Finalize JavaScript part which will execute Cupertino Pane library, present pane, handle add to Bag Button, some transitions and Pane behavior.

<script>
const translateYRegex = /\.*translateY\((.*)px\)/i;
let paneY;
let paneEl;
let totalprice = 0;
let itemprice = 3;
let size = 'S';
const contentEl = document.querySelector('.content');
const firstStep = document.querySelector('.first-step');
const myBag = document.querySelector('.my-bag');
const myBagH2 = document.querySelector('.my-bag h2');
const myBagList = document.querySelector('.my-bag .list');

const firstHeight = 120;
firstStep.style.height = `${firstHeight - 30}px`;
contentEl.style.marginTop = `-${firstHeight + firstHeight/2}px`;
contentEl.style.paddingTop = `${firstHeight/2}px`;
contentEl.style.transform = `translateY(${firstHeight}px) translateZ(0px)`;
contentEl.style.height = `calc(100% + ${firstHeight/2}px + 30px)`;

function checkTransformations() {
  paneEl = document.querySelector('.pane');
  if (!paneEl) return;
  paneY = parseFloat(translateYRegex.exec(paneEl.style.transform)[1]);

  if (window.innerHeight - paneY - 30 > firstHeight) {
    myBagH2.style.transform = 'translate3d(0px, 0px, 0px)';
    myBagList.style.transform = 'translate3d(0px, 0px, 0px)';
    myBag.style.opacity = 1;
    firstStep.style.opacity = 0;
  } else {
    myBagH2.style.transform = 'translate3d(0px, 60px, 0px)';
    myBagList.style.transform = 'translate3d(0px, 60px, 0px)';
    myBag.style.opacity = 0;
    firstStep.style.opacity = 1;
  }
}

let drawer = new CupertinoPane('ion-drawer', {
  followerElement: '.content',
  breaks: {
    middle: {
      enabled: true,
      height: firstHeight
    },
    bottom: {
      enabled: true,
      height: 20
    }
  },
  buttonClose: false,
  showDraggable: false,
  bottomClose: true,
  draggableOver: true,
  lowerThanBottom: false,
  dragBy: ['.cupertino-pane-wrapper .pane', '.content'],
  onDrag: () => checkTransformations(),
  onTransitionEnd: () => checkTransformations()
});

function presentPane(e) {
  drawer.present({
    animate: true
  });

  // Total price
  totalprice += itemprice;
  document.getElementsByClassName('big')[1].innerHTML = totalprice;
  document.getElementById('total-amount').innerHTML = totalprice;
  document.getElementsByClassName('size-drink')[1].innerHTML = size;

  // Button animation
  let icon = document.querySelector('#button-add ion-icon');
  let text = document.querySelector('#button-add .button-text');
  text.style.opacity = 0;

  setTimeout(() => {
    icon.style.opacity = 1;
    text.innerHTML = 'Add 1 more'
  }, 200);

  setTimeout(() => {
    icon.style.opacity = 0;
  }, 1000);

  setTimeout(() => {
    text.style.opacity = 1;
  }, 1300);
}

function setActive(e, n, kfc, s) {
  itemprice = n;
  size = s;
  let frame = document.querySelector('.active-frame ');
  frame.style.transform = `translate3d(${55 * kfc}px, 0px, 0px)`;

  let elems = document.getElementsByClassName('size');
  for (var i = 0; i < elems.length; i++) {
    elems[i].classList.remove('active');
  }
  e.classList.add('active');
  document.getElementsByClassName('big')[0].innerHTML = itemprice;
}
</script>

Conclusions

Live demo results
Code sources results

Thanks

Dribble project
Android version

Bulletin: UI component for javascript developers

Roman Antonov — Thu, 11 Jun 2020 15:08:48 +0000

Bulletin component

It's a very useful draggable pop-up for mobile developers
Bulletins was firstly demonstrated on iOS, as simple airpods information popup (about 3 years ago), but the good and stable javascript implementation for javascript developers still doesn't exist.

In this quick tutorial

I will introduce how to create bulletin component easy and how to start use thats cute pop-ups in your application.
Especially, it must be used for alerts on hybrid applications cordova/ionic/react.

Getting started

Component will based on cupertino-pane package. Package can be used with any JavaScript framework. It is also supports TypeScript out of the box.

Install package into your `node_modules`

npm install cupertino-pane --save

Or use from CDN

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

Design your html markup for bulletin

<body>
  ...
  <div class="bulletin">
    <h1>Welcome to pet board!</h1>
    <div class="emoji">😻</div>
    <p>
     Explore and choose a pet that you wanna play with.
    </p>
    <button onclick="dismiss();">
     Continue
    </button>
  </div>
</body>

Stylize default pane in bulletin style

.pane {
  border-radius: 30px !important;
  width: calc(100% - 16px) !important;
  height: auto !important;
  margin: auto;
  left: 0;
  right: 0;
}

Initialize bulletin component

var bulletin = new CupertinoPane('ion-bulletin', {  
  initialBreak: 'top',
  breaks: {
    top: { enabled: true, height: 348},
    middle: { enabled: false},
    bottom: { enabled: false},
  },
  backdrop: true,
  topperOverflow: false,
  backdropOpacity: 0.8,
  bottomClose: true,
  buttonClose: false,
  showDraggable: false,
  bottomOffset: 8,
  onBackdropTap: () => bulletin.destroy({animate: true})
});

function present() { 
  bulletin.present({animate: true});
}

function dismiss() { 
  bulletin.destroy({animate: true});
}

As you can see by options, pane will have only topper position.
Bottom position will auto-destroy the pane by the option bottomClose: true.
And the bottom offset bottomOffset: 8 it is a margin from screen bottom to pane bottom bound.
Overflow needs to be disabled for better experience topperOverflow: false.

Appendix 1

If you are using CDN and pure JS, probably you can catch exports error with modules environment. Solve it with additional line right above your import:

<script>var exports = {"__esModule": true};</script>
<script src="https://unpkg.com/cupertino-pane/dist/cupertino-pane.min.js"></script>

Results and demonstration

Live demo with Ionic framework are here
Sources are here

Bottom drawer tutorial

Roman Antonov — Wed, 29 Apr 2020 08:59:02 +0000

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!

DEV Community: Roman Antonov

Much more sweetest advantages of using Panes for your next Front-end project 🍰

One Instance – thousands of solutions

The race is over: Vue, React, Angular, Svelte, JQuery

The new generation of User Interfaces

Sweetest UI enhancement

Language agnostic

Re-usable in full

Modular architecture

Does Panes library, framework, or component ?

[Dribbble Challenge] — Coffee Ordering Animation

Tutorial level: Beginner/Junior

Motivation

Original concept

The flow is quite simple:

Technologies

Packages

Let's Build

Libraries installation

First page state DOM elements

First page state styles

Size picker

Add to Bag

Prepare DOM elements for bottom pane

Apply a new styles for bottom pane

My Bag state styles

Finalize scripts

Conclusions

Thanks

Bulletin: UI component for javascript developers

Bulletin component

In this quick tutorial

Getting started

Install package into your node_modules

Or use from CDN

Design your html markup for bulletin

Stylize default pane in bulletin style

Initialize bulletin component

Appendix 1

Results and demonstration

Bottom drawer tutorial

Leadership UI

Revolutionary components

Requirements and package description

Getting Started

Conclusions

Install package into your `node_modules`