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>
|
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-
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>
|
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>
|
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>
|
The above example will show the popover with the yellow color and text color in #333.
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>
|
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.
Advertisements
Add Comment
📖 Read More
- 1. Ionic Popup
- 2. Ionic Scroll
- 3. Ionic Infinite Scroll
- 4. Ionic Side Menus
