0 votes
in Onsen UI by
Dialog in Onsen UI

1 Answer

0 votes
by
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

Related questions

0 votes
asked Feb 7, 2020 in Onsen UI by DavidAnderson
0 votes
0 votes
asked Feb 7, 2020 in Onsen UI by DavidAnderson
...