Skip to content

Commit 95701e5

Browse files
hazzohazzo
committed
Vue ripple directive v1.0.0
0 parents  commit 95701e5

File tree

13 files changed

+520
-0
lines changed

13 files changed

+520
-0
lines changed

‎.babelrc‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"presets": [
3+
["latest", {
4+
"es2015": { "modules": false }
5+
}]
6+
]
7+
}

‎.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
npm-debug.log
5+
yarn-error.log
6+
.idea

‎.npmignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.idea
3+
.DS_Store
4+
dist
5+
.babelrc

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) PygmySlowLoris Team <team@pygmyslowloris.org>
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎README.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# Material Ripple Effect
2+
3+
Material Ripple Effect as Vue Directive.
4+
5+
This directive it's meant to be used in any element in which you like to achieve such ripple effect.
6+
7+
## Installation
8+
9+
```
10+
npm install vue-ripple-effect --save
11+
```
12+
13+
## Options
14+
15+
Optional parameter to pass to the directive.
16+
17+
| Parameter | Type | Values |
18+
| :--------------- | :------- | :--------- |
19+
| `color-value` | String | <b>Default: 'rgba(0, 0, 0, 0.35)'</b>. <br> Accepts either HEX, RGB & RGBA values. For optimal look use RGBA with low opacity. |
20+
21+
22+
## Sample & Usage
23+
24+
First you need to import the directive and add it to Vue.
25+
26+
```
27+
import Ripple from 'vue-ripple-effect'
28+
29+
Vue.directive('ripple', Ripple);
30+
```
31+
32+
Then use on any element you want to achieve the effect.
33+
34+
```
35+
<div v-ripple class="button is-primary">This is a button</div>
36+
```
37+
38+
If you want a custom color just pass a color parameter as `string`. It's best if you use RGBA colors to achieve a greater effect.
39+
40+
```
41+
<div v-ripple="'rgba(255, 255, 255, 0.35)'" class="button">I have different color</div>
42+
```

‎demo/App.vue‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
<template>
2+
<div id="app">
3+
<!--Example dependecies-->
4+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.min.css">
5+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
6+
<a href="https://github.com/PygmySlowLoris/vue-ripple-directive"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
7+
8+
<!--Example Elements-->
9+
<section class="hero">
10+
<div class="hero-body" style="padding: 1rem 0">
11+
<div class="container">
12+
<div class="columns">
13+
<div class="column is-6 is-offset-3" style="display: flex; align-items: center;">
14+
<div class="is-pulled-left">
15+
<img width="350px" src="./assets/logo.png">
16+
</div>
17+
<div class="is-pulled-left" style="text-align: left">
18+
<h1 class="title text-medium-grey" style="margin-bottom: .5rem">
19+
Material Ripple Effect
20+
</h1>
21+
<hr class="is-marginless">
22+
<h2 class="subtitle text-light-grey" style="margin-top: .5rem">
23+
A Vue Directive
24+
</h2>
25+
</div>
26+
</div>
27+
</div>
28+
</div>
29+
</div>
30+
</section>
31+
32+
<section class="section" style="padding-top: .5rem">
33+
<div class="container">
34+
<div class="columns">
35+
<div class="column is-8 is-offset-2">
36+
<div class="box formated">
37+
<div class="heading">
38+
<div class="columns">
39+
<div class="column">
40+
<i class="material-icons top-left">code</i>
41+
<span class="is-pulled-right"><b>Examples</b></span>
42+
</div>
43+
</div>
44+
</div>
45+
<div class="content">
46+
<div class="columns">
47+
<div class="column">
48+
<div>
49+
<table class="table is-striped">
50+
<thead>
51+
<tr v-ripple>
52+
<th>One</th>
53+
<th>Two</th>
54+
</tr>
55+
</thead>
56+
<tbody>
57+
<tr v-for="n in 2">
58+
<td v-ripple>Yes ripple {{ n }}</td>
59+
<td>No ripple {{ n }}</td>
60+
</tr>
61+
</tbody>
62+
</table>
63+
</div>
64+
<div>
65+
<div v-ripple="'rgba(255, 255, 255, 0.35)'" class="button is-primary" style="margin: .5rem">This is a button</div>
66+
<a v-ripple="'rgba(230, 68, 3, 0.71)'" class="button is-success is-outlined" style="text-decoration: none; margin: .5rem">This is an Outlined</a>
67+
</div>
68+
<div>
69+
<span v-ripple="'rgba(99, 249, 8, 0.71)'" class="tag is-info pointer">Info</span>
70+
<span v-ripple class="tag is-success pointer">Success</span>
71+
<span v-ripple="'rgba(9, 249, 8, 0.71)'" class="tag is-primary is-medium pointer">Medium</span>
72+
<span v-ripple="'rgba(99, 9, 8, 0.71)'" class="tag is-info is-large pointer">Large</span>
73+
</div>
74+
</div>
75+
</div>
76+
<div class="columns">
77+
<div class="column has-text-centered">
78+
<a href="https://github.com/PygmySlowLoris/vue-ripple-directive">Code usage & samples</a>
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
</div>
86+
</section>
87+
88+
<footer class="footer">
89+
<div class="container">
90+
<div class="content has-text-centered">
91+
<p>
92+
<strong>Material Ripple Effect Vue Directive</strong> by <a href="https://github.com/PygmySlowLoris">Pygmy Team</a>.
93+
</p>
94+
<p><small>Used dependencies for this demo: <a href="http://bulma.io">bulma</a></small></p>
95+
</div>
96+
</div>
97+
</footer>
98+
99+
</div>
100+
</template>
101+
102+
<script>
103+
export default {
104+
name: 'app',
105+
data(){
106+
return {
107+
colors: '',
108+
updatedColor: '',
109+
newColor: '',
110+
}
111+
}
112+
}
113+
</script>
114+
115+
<style scoped>
116+
#app {
117+
-webkit-font-smoothing: antialiased;
118+
-moz-osx-font-smoothing: grayscale;
119+
text-align: center;
120+
color: #2c3e50;
121+
}
122+
123+
.pointer {
124+
cursor: pointer;
125+
}
126+
127+
h1, h2 {
128+
font-weight: normal;
129+
}
130+
131+
hr {
132+
background-color: transparent;
133+
border: none;
134+
display: block;
135+
height: inherit;
136+
margin: 1.5rem 0;
137+
border-top: dashed 1px;
138+
}
139+
140+
141+
li {
142+
display: inline-block;
143+
margin: 0 10px;
144+
}
145+
146+
a {
147+
color: #0b99b9;
148+
text-decoration: underline;
149+
}
150+
151+
.text-medium-grey {
152+
color: #333;
153+
}
154+
155+
.text-light-grey {
156+
color: #888;
157+
}
158+
159+
.box.formated {
160+
position: relative;
161+
padding: 0;
162+
}
163+
164+
.box.formated .heading {
165+
font-size: 1rem;
166+
text-transform: capitalize;
167+
padding: .8rem 1.5rem;
168+
background-color: #fafafa;
169+
}
170+
171+
.box.formated .content {
172+
padding: 1rem 2rem;
173+
}
174+
175+
i.top-left {
176+
position: absolute;
177+
left: 1.5rem;
178+
top: 0.8rem;
179+
}
180+
181+
.vertical-separator {
182+
display: flex; justify-content: space-around;
183+
}
184+
185+
.vertical-separator .line {
186+
border-right: 1px solid #cccccc;
187+
}
188+
</style>

‎demo/assets/logo.png‎

61 KB
Loading

‎demo/main.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Vue from 'vue'
2+
import App from './App.vue'
3+
import Ripple from '../src/ripple'
4+
5+
Vue.directive('ripple', Ripple);
6+
7+
new Vue({
8+
el: '#app',
9+
render: h => h(App)
10+
});
11+

‎index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>vue-ripple-directive</title>
6+
</head>
7+
<body>
8+
<div id="app">
9+
</div>
10+
<script src="./dist/build.js"></script>
11+
</body>
12+
</html>

‎package.json‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"name": "vue-ripple-directive",
3+
"version": "1.0.0",
4+
"description": "Vue Material Ripple Effect Directive",
5+
"main": "src/index.js",
6+
"repository": {
7+
"type": "git",
8+
"url": "https://github.com/PygmySlowLoris/vue-ripple-directive"
9+
},
10+
"keywords": [
11+
"vue",
12+
"ripple",
13+
"material",
14+
"directive",
15+
"ripple effect",
16+
"button"
17+
],
18+
"author": {
19+
"name": "PygmySlowLoris Team",
20+
"email": "team@pygmyslowloris.org",
21+
"url": "https://github.com/PygmySlowLoris"
22+
},
23+
"contributors": [
24+
"Guido Ceraso <guidoceraso@gmail.com> (https://github.com/hazzo)",
25+
"Eduardo Marcos <edujugon@gmail.com> (https://github.com/Edujugon)"
26+
],
27+
"license": "MIT",
28+
"bugs": {
29+
"url": "https://github.com/PygmySlowLoris/vue-fab/issues"
30+
},
31+
"homepage": "https://github.com/PygmySlowLoris/vue-ripple-effect#readme",
32+
"scripts": {
33+
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
34+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
35+
},
36+
"dependencies": {
37+
"vue": "^2.2.1"
38+
},
39+
"devDependencies": {
40+
"babel-core": "^6.0.0",
41+
"babel-loader": "^6.0.0",
42+
"babel-preset-latest": "^6.0.0",
43+
"cross-env": "^3.0.0",
44+
"css-loader": "^0.25.0",
45+
"file-loader": "^0.9.0",
46+
"url-loader": "^0.5.8",
47+
"vue-loader": "^11.1.4",
48+
"vue-template-compiler": "^2.2.1",
49+
"webpack": "^2.2.0",
50+
"webpack-dev-server": "^2.2.0"
51+
}
52+
}

0 commit comments

Comments
 (0)