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
1 post - 1 participant