Ionic Popover


Ionic Popover : The popover is basically a view which is used to provide additional information of element when user hovers, clicks or performs some action. Content which needs to show on popover keep them inside the <ion-popover-view> tag. Here in this tutorial we are going to explain Ionic Popover with example and demo.


Ionic Popover

Let us first create a template and add the popover view inside it. Here we are going to create a button and call a function on click event.

Popover Html Part-

Here is html part of popover in ionic.

Ionic Popover:

<html>
<body ng-app="todo" ng-controller="MainCtrl">
<div><button>Popover</button></div>
<script id="test-popover.html" type="text/ng-template">// <![CDATA[
  <ion-popover-view>
    <ion-header-bar>


<h1 class="title">Popover Title</h1>


    </ion-header-bar>
    <ion-content>
      Hello World!
    </ion-content>
  </ion-popover-view>
// ]]></script>
</body>
</html>

In the above example we have created a button and called a function openPopover on click event. We will create this function in next step. We have created template with id test-popover.html which we will call to show the popover content on button click.  <ion-popover-view> tag is used to create popover view which contains the title & content etc.

Popover Controller Part-

Here is controller part of popover in ionic-

Ionic Popover Example:

 <script type="text/javascript">
angular.module('myApp', ['ionic'])
.controller('MainCtrl', function($scope, $ionicPopover) {
  $ionicPopover.fromTemplateUrl('test-popover.html', {
    scope: $scope
  }).then(function(popover) {
    $scope.popover = popover;
  });
  $scope.openPopover = function($event) {  
   $scope.popover.show($event);
  };
  $scope.closePopover = function() {
    $scope.popover.hide();
  };
 // Perform Action on destroy
   $scope.$on('$destroy', function() {
    $scope.popover.remove();
  });
  // Perform action on hide popover
  $scope.$on('popover.hidden', function() {
    // Perform action
  });
  // Perform action on remove popover
  $scope.$on('popover.removed', function() {
    // Perform action
  });
});

</script>

Try it »

The above controller has $ionicPopover which is required for ionic popover. The function openPopover is used to trigger the event to show the popover. You can call function closePopover to close the popover. The Controller code also contains the events based actions such as if you want to perform some action on popover hidden or popover removed. You can add event based action in the above example also.

If you run the above example it will produce output something like this-

Note :Make sure you have imported the service $ionicPopover in controller as in above example.

Ionic Popover Example & Demo Online

Methods-

Following methods are available in Ionic Popover-

1. fromTemplate()
2. fromTemplateUrl().

fromTemplate(templateString, options):

  • templateString(string) : This is string used for popover content.
  • options(Object): This is object. This is used for Options which are passed to the initialize method.

fromTemplateUrl(templateUrl, options):

  • templateUrl(string) : Url to load Template.
  • options(Object): This is object. This is used for Options which are passed to the initialize method.

More About Ionic Popover

Let us Customize the popover.


Add icon in Ionic Popover

Let us add icon in popover template –

Popover Html Part-

Here is html part of popover in ionic.

Ionic Popover:

<html>
<body ng-app="todo" ng-controller="MainCtrl">
<div><button>Popover</button></div>
<script id="test-popover.html" type="text/ng-template">// <![CDATA[
  <ion-popover-view>
    <ion-header-bar>

<span class="ion-chevron-up" style="position:absolute;top:-12px"></span>
<h1 class="title">Popover Title</h1>


    </ion-header-bar>
    <ion-content>
      Hello World!
    </ion-content>
  </ion-popover-view>
// ]]></script>
</body>
</html>

Try it »

In the above example we have added an icon and added custom style for the position of icon. You can also add your own style to manage the icon position and size.

Add Animation in Ionic Popover : slide In Up

You can add the animation in popover simply as below –

Ionic Add Animation in Popover: slide In Up

 <script type="text/javascript">
angular.module('myApp', ['ionic'])
.controller('MainCtrl', function($scope, $ionicPopover) {
  $ionicPopover.fromTemplateUrl('test-popover.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(popover) {
    $scope.popover = popover;
  });
  $scope.openPopover = function($event) {  
   $scope.popover.show($event);
  };
  $scope.closePopover = function() {
    $scope.popover.hide();
  };
});

</script>

Try it »

The above example will show the popover with the slide in up effect. You can also add other animation effects that ionic supports.

Change Background of Popover

You can add your custom css style to change the background color-

Change Background of Popover

<ion-popover-view class="my-popover">
    <ion-header-bar>
      <h1 class="title">Popover Title</h1>
    </ion-header-bar>
    <ion-content>
	<p style="padding:5px;">
      Hello World!
	  Welcome to Tutorialsplane.com!
	</p>
    </ion-content>
  </ion-popover-view>
<style>
.my-popover{
background:yellow !important;
color:#333;
}
</style>

Try it »

The above example will show the popover with the yellow color and text color in #333.

Note : If you want to change the default color and background color override the class .popover. example .popover {color:green; background:yellow;}. It will change the default color & background everywhere in the application so make sure before you override this class.

Change Background Color of Backdrop of Popover

You can override the default background of backdrop of popover by overriding the class .popover-backdrop. So now let us check how it works-

Change Background Color of Backdrop of Popover

<style>
.popover-backdrop{
 background: rgba(215, 0, 54, 0.8) !important;
}
</style>

Try it »

As you see we have added custom background with important style in .popover-backdrop class because we have to override the default background and replace with our custom background. The above example will show the popover backdrop with the custom background color.

You can customize the popover in ionic as per your need. You can also override the default position of the popover. Most of the time we are concerned about the height & width of the popover you can override the height & width also by adding custom class in wrapper or you can directly override main popover class.

Tip : Make your application more beautiful by customizing the ionic popover. Overriding the core css is proper way so do not modify core files.

Advertisements

Add Comment

📖 Read More