Posted in Cordova/PhoneGap

[Cordova] Display Onsen UI popover as dropdown

It is very easy to display an Onsen UI popover as dropdown.

For full example, please refer here

Below is detail of code to display popover using Onsen UI

  • HTML
<body ng-controller="DropdownController">
<ons-page>
  <ons-toolbar>
Dropdown example
</ons-toolbar> </ons-page> <ons-template id="popover.html"> <ons-popover cancelable direction="down"> <ons-list> <ons-list-item ng-repeat="option in options" modifier="tappable"> {{ option }} </ons-list-item> </ons-list> </ons-popover> </ons-template> </body>
  • JS
.controller('DropdownController', function($scope) {
  ons.ready(function() {
    ons.createPopover('popover.html').then(function(popover) {
      $scope.popover = popover;
    });
  });

  $scope.options = ['Load', 'Sync', 'Settings'];
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s