Skip to content

Commit 3117052

Browse files
rigor789rigor789
committed
Added examples, updated license year
1 parent 919ff90 commit 3117052

10 files changed

+153
-1
lines changed

‎.npmignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
node_modules
22
.editorconfig
3+
.idea

‎LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License (MIT)
22

3-
Copyright (c) 2015 Igor Randjelovic
3+
Copyright (c) 2017 Igor Randjelovic
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎example/client.css

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/client.css.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/client.js

+3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/client.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/index.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
5+
<title>vue-scrollTo examples</title>
6+
<link href="/client.css" rel="stylesheet"></head>
7+
<body>
8+
<div id="app"></div>
9+
<script type="text/javascript" src="/client.js"></script></body>
10+
</html>

‎examples.config.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
module.exports = {
2+
3+
filename: {
4+
js: '[name].js',
5+
css: '[name].css'
6+
},
7+
8+
html: {
9+
title: 'vue-scrollTo examples'
10+
}
11+
}

‎examples.vue

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<template>
2+
<div class="Index">
3+
<p class="center">
4+
<img class="vue-logo" src="https://vuejs.org/images/logo.png" alt="Vue logo">
5+
</p>
6+
7+
<h1 class="center">
8+
vue-scrollTo Examples
9+
</h1>
10+
11+
<p class="center">
12+
<button v-scroll-to="'#element'">Scroll down with string literal</button>
13+
<button v-scroll-to="{ el: '#element' }">Scroll down with el:</button>
14+
<button v-scroll-to="{ element: '#element' }">Scroll down with element:</button>
15+
<button v-scroll-to="{ el: '#element', duration: 5000 }">Scroll down in 5 seconds</button>
16+
<button v-scroll-to="{ el: '#element', easing: 'linear' }">Scroll down with different easing</button>
17+
<button v-scroll-to="{ el: '#element', easing: [.6, -.80, .30, 1.9], duration: 2000 }">Scroll down with custom easing</button>
18+
<button v-scroll-to="{ el: '#element', offset: 200 }">Scroll down with offset</button>
19+
</p>
20+
21+
<p>
22+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
23+
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
24+
</p>
25+
<p>
26+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
27+
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
28+
</p>
29+
<p>
30+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
31+
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
32+
</p>
33+
<p>
34+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
35+
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
36+
</p>
37+
38+
<h1 id="element">Hi i'm #element, nice to meet you. You scrolled a long way to meet me!</h1>
39+
<p>
40+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
41+
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
42+
</p>
43+
<p>
44+
This paragraph is about 200px lower from the #element...
45+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
46+
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
47+
</p>
48+
<p>
49+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
50+
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
51+
</p>
52+
<p>
53+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
54+
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
55+
</p>
56+
<p>
57+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
58+
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
59+
</p>
60+
<p>
61+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
62+
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
63+
</p>
64+
<p>
65+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
66+
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
67+
</p>
68+
</div>
69+
</template>
70+
71+
72+
<script>
73+
import Vue from 'vue'
74+
import VueScrollTo from 'index.js'
75+
Vue.use(VueScrollTo)
76+
77+
export default {
78+
79+
}
80+
</script>
81+
82+
<style>
83+
*,
84+
*::before,
85+
*::after {
86+
box-sizing: border-box;
87+
}
88+
89+
body {
90+
width: 600px;
91+
margin: 0 auto;
92+
font-family: sans-serif;
93+
}
94+
95+
.vue-logo {
96+
width: 200px;
97+
height: auto;
98+
}
99+
100+
h1 {
101+
102+
}
103+
104+
button {
105+
display: inline-block;
106+
border: none;
107+
outline: none;
108+
padding: 10px 15px;
109+
background: #4fc08d;
110+
border: 1px solid #4fc08d;
111+
color: #fff;
112+
border-radius: 20px;
113+
margin: 10px;
114+
cursor: pointer;
115+
}
116+
117+
.center {
118+
text-align: center;
119+
}
120+
</style>

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,8 @@
2424
},
2525
"dependencies": {
2626
"bezier-easing": "^2.0.3"
27+
},
28+
"scripts": {
29+
"build-examples": "vue build examples.vue --prod --dist example --config examples.config.js"
2730
}
2831
}

0 commit comments

Comments
 (0)