forked from FauzanKhan/angular-popover
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
69 lines (69 loc) · 3.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en" ng-app="popoverApp">
<head>
<meta charset="UTF-8">
<title>ngPopover | A simple, elegant and easily customizable popover in angular that transcludes custom HTML | angular, popover, generic, elegant, material, angular-popover, bootstrap, foundation, tranclude, custom popover, custom, transclude, popover directive</title>
<meta name="description" content="A simple, elegant and easily customizable popover in angular that transcludes custom HTML">
<meta name="keywords" content="angular, popover, generic, elegant, material, angular-popover, bootstrap, foundation, tranclude, custom popover, custom, transclude, popover directive">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="dist/css/ngpopover.css">
<link rel="stylesheet" href="dist/css/demo.css">
</head>
<body ng-controller="masterController">
<header>
<h1>ngPopover <br><small>An elegant, easily customizable generic popover in Angular <br>that <span>transcludes your custom HTML</span>.</small></h1>
</header>
<div class="popover-demo-container">
<span class="button ng-popover-trigger" id="normal-popover">Popover with Text</span>
<span class="button ng-popover-trigger" id="heading-popover">Popover with Heading</span>
<span class="button ng-popover-trigger" id="custom-popover">Popover with Custom Template</span>
</div>
<div class="flash-message">
{{message}}
</div>
<footer>
<a href="https://github.com/FauzanKhan/angular-popover.git" target="_blank">
<img src="http://cdn.flaticon.com/png/256/25231.png" alt=""></--> Fork on GitHub
</a>
</footer>
<ng-popover trigger="normal-popover" popover-class="normal-text-popover" direction="left" on-open="openCallback('text popover')" on-close="closeCallbacl('text popover')">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur nulla incidunt provident quibusdam laborum suscipit. Vel laborum cupiditate, harum hic error ipsum dolorum, facilis culpa quo tenetur fugit eveniet illum.
</ng-popover>
<ng-popover trigger="heading-popover" popover-class="heading-popover" direction="top" on-open="openCallback('heading popover')" on-close="closeCallback('heading popover')">
<h4>This text is inside an <h4> tag!</h4>
</ng-popover>
<ng-popover trigger="custom-popover" popover-class="custom-popover" on-open="openCallback('template popover')" on-close="closeCallback('template popover')">
<div class="condition-popover">
<div class="popover-header">
<div class="popover-header-content clearfix">
<div class="title">
Field
</div>
<div class="options">
<div class="option">
<input type="radio" id="opt1" name="option">
<label for="opt1">Label</label>
</div>
<div class="option">
<input type="radio" id="opt2" name="option">
<label for="opt2">Label</label>
</div>
<div class="option">
<input type="radio" id="option3" name="option">
<label for="option3">Label</label>
</div>
</div>
</div>
</div>
<div class="popover-body">You can do some super crazy stuff here and this popover wont break.<br> <span>Believe it!</span></div>
<div class="popover-footer text-right">
<span class="button" ng-click="closePopover('custom-popover')">Cancel</span>
<span class="button" ng-click="closePopover('custom-popover')">Okay</span>
</div>
</div>
</ng-popover>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-rc.2/angular.min.js"></script>
<script src="dist/js/app.min.js"></script>
<script src="dist/js/ngPopover.min.js"></script>
</body>
</html>