loading...

Bulletin: UI component for javascript developers

romanrr profile image Roman Antonov ・2 min read

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.

Alt Text

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

Demo
Live demo with Ionic framework are here
Sources are here

Posted on by:

Discussion

markdown guide