Dialogs are pop-ups that enhance user interactions with the app
Onsen offers a lot of options for dialog, the most commonly used dialog being <Dialog> and <Alertdialog>. The functionality of both the components is same ie., displaying a pop-up message to the user. However, the animation and the styling associated with them are different.
Apart from this Ons.notifiction offers a wide variety of dialog such as conformation dialog with ok and cancel button and prompt dialog Which can accept a input from user.
This example will show how to make use of various type of dialog boxes
var MyPage = React.createClass({
handleClickA: function() {
ons.notification.alert('WELCOME TO COURSE ON ONSEN UI'); },
handleClickC: function() {
ons.notification.confirm('WELCOME TO COURSE ON ONSEN UI'); },
handleClickP: function() {
ons.notification.prompt('WELCOME TO COURSE ON ONSEN UI'); },
renderToolbar: function() {
return (
<Ons.Toolbar> <div className='center'>FRESCO PLAY</div></Ons.Toolbar>
); },
render: function() {
return (
<Ons.Page renderToolbar={this.renderToolbar}>
<p style={{textAlign: 'center'}}>
<Ons.Button onClick={this.handleClickA}>ALERT</Ons.Button>
// code to render similar buttons
Let us add some functionality to the ticket booking app created in the previous module.
As shown, the app should have the following features:
Input fields to take Start and Destination points
Travel Date (as a drop-down list)
Bus type (AC / Non-AC) (as radio buttons)
Number of passengers (as range)
Search tickets button
