This repository has been archived by the owner on Jun 1, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
example.html
152 lines (132 loc) · 5.88 KB
/
example.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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Vue</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<link rel="stylesheet" href="themes/default.css" />
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="popover.js"></script>
</head>
<body>
<div id="app">
<section class="hero is-medium is-light is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">
Vue Link Popover
</h1>
<h2 class="subtitle">
Customisable, flexible, easy to use popover contents for Vue.js similar to that used by Facebook & Twitter
</h2>
</div>
</div>
</section>
<div class="container">
<section class="section">
<h2 class="title is-4">Demos</h2>
<div class="content">
<link-popover>
<button class="button primary">Default Popup</button>
<div slot="content">
By default, the popup is shown when the trigger text/content is hovered upon
</div>
</link-popover>
<link-popover click="true">
<button class="button is-black">Click Me To Open Popup</button>
<div slot="content">
<h1>The Man James Bond</h1>
<p>Royal Navy Commander James Bond, CMG, RNVR, is a fictional character created by British journalist and novelist Ian Fleming in 1953. He is the protagonist of the James Bond series of novels, films, comics and video games. Fleming wrote twelve Bond novels and two short story collections, although the last two books—The Man with the Golden Gun and Octopussy and The Living Daylights—were published posthumously.</p>
<button>Read More</button>
</div>
</link-popover>
</div>
</section>
<section class="section">
<div class="heading">
<h2 class="title is-4">Installation</h2>
<h3 class="subtitle is-6">Get up and running with Vue-Link-Popover</h3>
</div>
<div class="content">
<p>In a Vue.js project, install with <code>npm install --save vue-link-popover</code>.</p>
<p>
For browser based environments, download <a href="#">popover.js</a> or use it from a CDN:
<br />
<code><script src="https://unpkg.com/vue-link-popover/popover.js"><script></code>
</p>
<p>
Optionally but recommended, include the default stylings by either copying & tweaking the styles in <a href="#">themes/default.css</a> or by including it via CDN - <code><link rel="stylesheet" href="https://unpkg.com/vue-link-popover/themes/default.css" /></code>
</p>
</div>
</section>
<section class="section">
<h2 class="title is-4">Usage</h2>
<div class="content">
<p>
For browser environments, the plugin is automatically initialized with the default options so it can be used immediately with the <code><link-popover></code> tag.
</p>
<p>
Import it as a component:
<pre>
<code>
import LinkPopover from 'vue-link-popover'<br />
// Register component
components: {
LinkPopover
}
</code>
</pre>
To use it globally, import it from the package & then register it:
<pre>
<code>
import Vue from 'vue' <br />
import 'vue-link-popover/themes/default.css' <br />
import LinkPopover from 'vue-link-popover'<br />
Vue.component('link-popover', LinkPopover)
</code>
</pre>
Importing it globally allows the passing of customisation options such as transitionName & custom themes. For example: <code>Vue.use(LinkPopover, { theme: 'snow-white', transitionName: 'my-awesome-transition'})</code>
</p>
<h3 class="title is-6">Available Options</h3>
<ul>
<li><strong>click</strong> By default, the popover shows when hovered upon, however, you can change this behaviour to open the popup only when the click parameter is passed. Unlike the other options, this is used right on the popup container. For example, <code><link-popover click="true">Opens the popover click. <div slot="content">Opened on click</div></link-popover></code></a></li>
<li><strong>transitionName;</strong> This is the name of the transition to be used. <a href="https://vuejs.org/v2/guide/transitions.html">See the VueJS animation guide for how to use animations in Vue</a></li>
<li><strong>theme: </strong>This is the root class of the popup which you can use to easily customise the popup. For example, passing a theme variable of 'snow-white' can be used like this when styling:
<br />
<pre>
<code>
.snow-white.popover {
// Popup container
&__text {
// Visible text shown in browser
}
&__content {
// Hidden popover content container }
}
</code>
</pre>
</li>
<!-- <li><strong>theme: </strong></li> -->
</ul>
</div>
</section>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
humanizeURL: function (url) {
return url
.replace(/^https?:\/\//, '')
.replace(/\/$/, '')
}
}
})
</script>
</body>
</html>