<!DOCTYPE html>
<html ng-app="mgcrea.ngStrapDocs">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.5.0/css/font-awesome.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/libs.min.css">
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/docs.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-motion/0.4.4/angular-motion.css">
<link rel="stylesheet" href="style.css" />
<script src="//cdn.jsdelivr.net/angularjs/1.5.5/angular.min.js" data-semver="1.5.5"></script>
<script src="//cdn.jsdelivr.net/angularjs/1.5.5/angular-animate.min.js" data-semver="1.5.5"></script>
<script src="//cdn.jsdelivr.net/angularjs/1.5.5/angular-sanitize.min.js" data-semver="1.5.5"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.3.8"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.3.8"></script>
<script src="//mgcrea.github.io/angular-strap/docs/angular-strap.docs.tpl.js" data-semver="v2.3.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="bs-docs-section" ng-controller="PopoverDemoCtrl">
<div class="page-header">
<h1 id="popovers">Popovers <a class="small" href="//github.com/mgcrea/angular-strap/blob/master/src/popover/popover.js" target="_blank">popover.js</a>
</h1>
<code>mgcrea.ngStrap.popover</code>
</div>
<h2 id="popovers-examples">Examples</h2>
<p>Add small overlays of content on tap, like those on the iPad, to any element for housing secondary information.</p>
<div class="bs-example" style="padding-bottom: 24px;" append-source>
<!-- Button to trigger a default popover with a scope as an object {title:'', content:'', etc.} -->
<button type="button" class="btn btn-lg btn-primary" data-placement="bottom" data-animation="am-flip-x" bs-popover="popover">Click to toggle popover
<br />
<small>(using an object)</small>
</button>
<!-- You can also use data-attrs to assign scope variables -->
<button type="button" class="btn btn-lg btn-primary" data-placement="top-right" title="{{popover.title}}" data-content="{{popover.content}}" data-trigger="focus" bs-popover>Click to toggle popover
<br />
<small>(using data-attrs)</small>
</button>
<!-- You can use a custom html template with the `data-template` attr -->
<button type="button" class="btn btn-lg btn-danger" title="{{popover.title}}" data-content="{{popover.content}}" data-template-url="popover/docs/popover.demo.tpl.html" data-animation="am-flip-x" data-auto-close="1" bs-popover>Custom Popover
<br />
<small>(using data-template)</small>
</button>
<!-- A popover can also be triggered programmatically using the $popover service -->
<button type="button" id="popover-as-service" class="btn btn-lg btn-primary" title="{{popover.title}}" ng-click="togglePopover()">Click to toggle popover
<br />
<small>(using $popover service)</small>
</button>
</div>
<h5>fade-and-scale</h5>
<button type="button" class="btn btn-danger" data-animation="am-fade-and-scale" data-placement="center" bs-modal="modal">modal from center<br><small>(am-fade-and-scale)</small></button>
<h5>flip</h5>
<button type="button" class="btn btn-primary" data-animation="am-flip-x" data-placement="bottom" bs-popover="popover">popover from bottom<br><small>(am-flip-x)</small></button>
<button type="button" class="btn btn-success" data-animation="am-flip-x" data-placement="center" bs-modal="modal">modal from center<br><small>(am-flip-x)</small></button>
<h5>fade-and-slide</h5>
<button type="button" class="btn btn-primary" data-animation="am-fade-and-slide-left" data-placement="left" bs-aside="aside">aside from left<br><small>(am-fade-and-slide-left)</small></button>
<button type="button" class="btn btn-success" data-animation="am-fade-and-slide-right" data-placement="right" bs-aside="aside">aside from right<br><small>(am-fade-and-slide-right)</small></button><br><br>
<button type="button" class="btn btn-primary" data-animation="am-fade-and-slide-top" bs-modal="modal">modal from top<br><small>(am-fade-and-slide-top)</small></button>
<button type="button" class="btn btn-success" data-animation="am-fade-and-slide-bottom" data-placement="center" bs-modal="modal">modal from bottom<br><small>(am-fade-and-slide-bottom)</small></button>
<h5>slide</h5>
<button type="button" class="btn btn-primary" data-animation="am-slide-left" data-placement="left" bs-aside="aside">aside from left<br><small>(slide-left)</small></button>
<button type="button" class="btn btn-success" data-animation="am-slide-right" data-placement="right" bs-aside="aside">aside from right<br><small>(slide-right)</small></button>
<button type="button" class="btn btn-primary" data-animation="am-slide-top" bs-modal="modal">modal from top<br><small>(am-slide-top)</small></button>
<button type="button" class="btn btn-success" data-animation="am-slide-bottom" data-placement="center" bs-modal="modal">modal from bottom<br><small>(am-slide-bottom)</small></button>
<h5>fade</h5>
<button type="button" class="btn btn-primary" data-animation="am-fade" data-placement="left" bs-popover="popover">popover from left<br><small>(am-fade)</small></button>
<button type="button" class="btn btn-success" data-animation="am-fade" data-placement="right" bs-popover="popover">popover from right<br><small>(am-fade)</small></button><br><br>
<button type="button" class="btn btn-primary" data-animation="am-fade" data-placement="top" bs-tooltip="tooltip">tooltip from top<br><small>(am-fade)</small></button>
<button type="button" class="btn btn-success" data-animation="am-fade" data-placement="bottom" bs-tooltip="tooltip">tooltip from bottom<br><small>(am-fade)</small></button>
<h5>Dropdowns</h5>
<!-- Button to trigger a default dropdown from an array ($scope.dropdown) [{text:'foo', href:'', click:''}, ...] -->
<button type="button" class="btn btn-lg btn-primary" data-animation="am-flip-x" bs-dropdown="dropdown" aria-haspopup="true" aria-expanded="false">Click to toggle dropdown
<br>
<small>(using an object)</small>
</button>
<!-- Inlined sibling dropdown -->
<button type="button" class="btn btn-lg btn-primary" data-animation="am-flip-x" bs-dropdown aria-haspopup="true" aria-expanded="false">Click to toggle dropdown
<br>
<small>(using inlined sibling template)</small>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#anotherAction"><i class="fa fa-download"></i> Some action</a></li>
<li><a ng-click="$alert('Holy guacamole')"><i class="fa fa-globe"></i> Display an alert</a></li>
<li ng-repeat="i in ['Foo', 'Bar', 'Baz']"><a ng-href="#action{{i}}"><i class="fa fa-chevron-right"></i> {{i}}</a></li>
</ul>
</div>
</body>
</html>
/* Put your css in here */
body {
padding: 40px !important;
}
var app = angular.module('mgcrea.ngStrapDocs', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap']);
app.controller('MainCtrl', function($scope) {
});
'use strict';
angular.module('mgcrea.ngStrapDocs')
.config(function($popoverProvider) {
angular.extend($popoverProvider.defaults, {
html: true
});
})
.controller('PopoverDemoCtrl', function($scope, $popover) {
$scope.popover = {title: 'Title', content: 'Hello Popover<br />This is a multiline message!'};
var asAServiceOptions = {
title: $scope.popover.title,
content: $scope.popover.content,
trigger: 'manual'
}
var myPopover = $popover(angular.element(document.querySelector('#popover-as-service')), asAServiceOptions);
$scope.togglePopover = function() {
myPopover.$promise.then(myPopover.toggle);
};
});