Pagar.me's simple directive to provide pop-over functionality
Install via npm package manager:
$ npm install pg-ng-popover
Import the directive file into your project:
<script src="node_modules/pg-ng-popover/dest/pg-ng-popover.min.js"></script>If you wish the same style of the example, import the css.
<link rel="stylesheet" type="text/css" href="dest/css/pg-ng-popover.min.css">Load the pg-ng-popover module:
angular.module('myApp', ['pg-ng-popover']);
Call the directive in an element via attribute or tag name:
<div data-pg-ng-popover></div>
<pg-ng-popover></pg-ng-popover>Pass the popover's content via attribute content:
You can pass raw text or html content.
<div data-pg-ng-popover content="My awesome text or html here"></div>Choose bottom positioning:
<div data-pg-ng-popover position="bottom" content="My awesome text or html here"></div>You can also choose what event will trigger the popover hide/show:
• Click:
<div data-pg-ng-popover event-type="click" content="My awesome text or html here"></div>You can transition the hide/show states, but first of all you gotta tell the directive that you are going to transition it so opened class will be added:
<div data-pg-ng-popover transition="true" content="My awesome text or html here"></div>And you can also choose the name of the class that will be added when the popover opens and will be removed when the popover hides (default id opened):
<div data-pg-ng-popover opened-class="my-custom-class" transition="true" content="My awesome text or html here"></div>And that's it!