diff options
Diffstat (limited to 'example')
| -rw-r--r-- | example/index.css | 36 | ||||
| -rw-r--r-- | example/index.html | 47 |
2 files changed, 70 insertions, 13 deletions
diff --git a/example/index.css b/example/index.css new file mode 100644 index 0000000..3792232 --- /dev/null +++ b/example/index.css @@ -0,0 +1,36 @@ +body {
+ font-family: arial, sans-serif;
+ font-size: 16px;
+}
+
+a {
+ cursor: pointer;
+}
+
+button {
+ box-sizing: border-box;
+ font-size: 12px;
+ padding: 6px 12px;
+ border-radius: 3px;
+ border: solid 1px #0096d6;
+ background: linear-gradient(#0096d6, #0081b8);
+ color: #fff;
+}
+
+button:hover,
+button:focus,
+button:active {
+ background: #0081b8;
+ border: solid 1px #0081b8;
+}
+
+section {
+ position: relative;
+ width: 100%;
+}
+
+article {
+ position: relative;
+ margin: 0 auto;
+ float: left;
+}
\ No newline at end of file diff --git a/example/index.html b/example/index.html index 015e41d..a08c885 100644 --- a/example/index.html +++ b/example/index.html @@ -5,16 +5,7 @@ <title>nsPopover demo</title>
<link rel="stylesheet" href="../build/nsPopover.css">
-
- <style>
- body {
- font-family: arial, sans-serif;
- }
-
- a {
- cursor: pointer;
- }
- </style>
+ <link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>
<script src="../build/nsPopover.js"></script>
@@ -29,8 +20,38 @@ </head>
<body ng-controller="MainCtrl">
-<button ns-popover ns-popover-template="popover" ns-popover-trigger="mouseover">
- Menu
-</button>
+<section>
+ <h1> Popovers </h1>
+ <article>
+ <button ns-popover
+ ns-popover-template="popover"
+ ns-popover-trigger="click"
+ ns-popover-placement="bottom">
+ Popover on bottom
+ </button>
+
+ <button ns-popover
+ ns-popover-template="popover"
+ ns-popover-trigger="click"
+ ns-popover-placement="top">
+ Popover on top
+ </button>
+
+ <button ns-popover
+ ns-popover-template="popover"
+ ns-popover-trigger="click"
+ ns-popover-placement="left">
+ Popover on left
+ </button>
+
+ <button ns-popover
+ ns-popover-template="popover"
+ ns-popover-trigger="click"
+ ns-popover-placement="right">
+ Popover on right
+ </button>
+ </article>
+</section>
+
</body>
</html>
\ No newline at end of file |