const bulletin = new CupertinoPane('ion-bulletin', {
fitHeight:true,
backdrop: true,
backdropOpacity: 0.8,
bottomClose: true,
buttonDestroy: false,
showDraggable: false,
upperThanTop: true,
bottomOffset: 20,
onBackdropTap: () => bulletin.destroy({animate: true})
});
window.onload = async function () {
await document.querySelector('ion-app').componentOnReady();
bulletin.present({animate: true});
}
function present() {
bulletin.present({animate: true});
}
<html mode="ios">
<body>
<ion-app>
<ion-content>
<ion-header>
<ion-toolbar>
<ion-segment value="dogs">
<ion-segment-button value="cats">
<ion-label>Cats</ion-label>
</ion-segment-button>
<ion-segment-button value="dogs">
<ion-label>Dogs</ion-label>
</ion-segment-button>
</ion-segment>
<ion-buttons slot="start">
<ion-button>
<ion-icon name="chevron-back-outline"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button>
<ion-icon name="person-circle-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<!-- Image -->
<img onclick="present()" src="https://petdogowner.com/wp-content/uploads/2019/10/129357812_l.jpg" />
<ion-button onclick="present()">
Present
</ion-button>
<!-- Bulletin -->
<ion-bulletin>
<h1>Welcome to pet board!</h1>
<div class="emoji">😻</div>
<p>
Explore and choose a pet that you wanna play with.
</p>
<ion-button expand="block" (click)="dismiss();">
Continue
</ion-button>
</ion-bulletin> <!-- End bulletin -->
</ion-content>
</ion-app>
</body>
</html>
.pane {
border-radius: 30px !important;
width: calc(100% - 16px) !important;
margin: auto;
left: 0;
right: 0;
height: auto !important;
}
ion-bulletin {
display: none;
margin: 20px;
margin-top: 5px;
text-align: center;
}
ion-bulletin h1 {
margin-top: 0px;
color: #9c9c9c;
}
ion-bulletin p {
margin-top: 5px;
margin-bottom: 20px;
font-size: 18px;
color: #666666;
line-height: 1.5;
margin-top: 0;
}
ion-bulletin .emoji {
font-size: 70px;
background: rgb(56, 128, 255);
border-radius: 30px;
width: 110px;
height: 110px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
padding-top: 5px;
margin-top: 20px;
margin-bottom: 15px;
}
ion-bulletin ion-button {
height: 50px;
font-size: 16px;
font-weight: bold;
}