Skip to content
This repository was archived by the owner on Feb 24, 2023. It is now read-only.

Commit e714b61

Browse files
author
Łukasz Florczak
committed
New demo page
1 parent 5c9d8ff commit e714b61

File tree

8 files changed

+128
-62
lines changed

8 files changed

+128
-62
lines changed

‎.eslintignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
demo/*.js
2+
demo/*.vue

‎demo/App.vue‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44

55
// Examples
66
example-1
7+
example-2
8+
example-3
79

810
site-footer
911

@@ -15,6 +17,8 @@
1517
1618
// Examples
1719
import Example1 from './examples/Example1'
20+
import Example2 from './examples/Example2'
21+
import Example3 from './examples/Example3'
1822
1923
export default {
2024
name: 'Demo',
@@ -23,7 +27,15 @@
2327
SiteHeader,
2428
SiteFooter,
2529
26-
Example1
30+
Example1,
31+
Example2,
32+
Example3
33+
},
34+
35+
created () {
36+
let script = document.createElement('script')
37+
script.setAttribute('src','https://static.codepen.io/assets/embed/ei.js')
38+
document.head.appendChild(script)
2739
}
2840
}
2941
</script>

‎demo/components/CodePen.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template lang="pug">
2+
div.codepen(data-height="504" data-theme-id="dark" data-default-tab="js,result" data-user="lukaszflorczak" data-slug-hash="EJRNMM" style="height: 504px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="vue-agile – default settings and minimal styles")
3+
<span>See the Pen <a href="https://codepen.io/lukaszflorczak/pen/EJRNMM/">
4+
vue-agile – default settings and minimal styles</a> by Lukasz Florczak (<a href="https://codepen.io/lukaszflorczak">@lukaszflorczak</a>)
5+
on <a href="https://codepen.io">CodePen</a>.</span>
6+
</p>
7+
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
8+
</template>
9+
10+
<script>
11+
export default {
12+
name: 'CodePen',
13+
14+
props: {
15+
id: {
16+
type: String,
17+
default: null
18+
},
19+
20+
height: {
21+
type: Integer,
22+
default: 400
23+
}
24+
}
25+
}
26+
</script>

‎demo/components/SiteFooter.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@
22
footer.site-footer
33
div.container
44
div.row
5-
div.col-xe-12
5+
div.col-xs-12
66
div.copyright
7-
span Copyright © 2017 #[strong Łukasz Florczak]!{' '}
8-
a(href="https://twitter.com/lukaszflorczak" class="twitter-follow-button" data-show-count="false") Follow @lukaszflorczak
7+
span Copyright © 2017-2019 #[strong Łukasz Florczak]!{' '}
8+
a(href="https://twitter.com/lukaszflorczak" class="twitter-follow-button" data-show-count="false") Follow @lukaszflorczak!{' '}
9+
a(href="http://ko-fi.com/lukaszflorczak" target="_blank")
10+
img(src="https://img.shields.io/badge/buy%20me%20a%20coffee-+3€-red.svg?style=flat-square&logo=ko-fi")
911

1012
div.row
1113
div.col-xs-12

‎demo/components/SiteHeader.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
div.container
44
div.row
55
div.col-xs-12
6-
h1.section__title Demo of #[strong vue-agile]#[span.badge 0.5]
6+
h1.section__title Demo of #[strong vue-agile]#[span.badge 1.0]
77

88
p vue-agile is a carousel component for Vue.js inspired by Slick. Simple, touch-friendly, written in Vue and Vanilla JS
99

‎demo/examples/Example1.vue‎

Lines changed: 22 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,29 @@
1-
<template lang="pug">
2-
section.section.section--demo-1
3-
div.container
4-
div.row
5-
div.col-xs-12
6-
h2.section__title #[strong #1] demo
7-
p.section__description vue-agile with default settings and minimal styles
8-
9-
div.row
10-
div.col-xs-12
11-
agile(:options="options")
12-
div.slide(v-for="n in 6", :key="n", :class="`slide--${n}`")
13-
h3 slide {{ n }}
14-
1+
<template>
2+
<section class="section section--demo-1">
3+
<div class="container">
4+
<div class="row">
5+
<div class="col-xs-12">
6+
<h2 class="section__title"><strong>#1</strong> demo</h2>
7+
<p class="section__description">vue-agile with default settings and minimal styles</p>
8+
</div>
9+
</div>
10+
11+
<div class="row">
12+
<div class="col-xs-12">
13+
<p class="codepen" data-height="504" data-theme-id="dark" data-default-tab="css,result" data-user="lukaszflorczak" data-slug-hash="EJRNMM" style="height: 504px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="vue-agile – default settings and minimal styles">
14+
<span>See the Pen <a href="https://codepen.io/lukaszflorczak/pen/EJRNMM/">
15+
vue-agile – default settings and minimal styles</a> by Lukasz Florczak (<a href="https://codepen.io/lukaszflorczak">@lukaszflorczak</a>)
16+
on <a href="https://codepen.io">CodePen</a>.</span>
17+
</p>
18+
</div>
19+
</div>
20+
</div>
21+
</section>
1522
</template>
1623

1724

1825
<script>
1926
export default {
20-
name: 'Example1',
21-
22-
data () {
23-
return {
24-
options: {
25-
fade: true,
26-
responsive: [
27-
{
28-
breakpoint: 900,
29-
settings: {
30-
fade: false
31-
}
32-
// settings: {
33-
// slidesToShow: 3
34-
// }
35-
}
36-
]
37-
}
38-
}
39-
}
27+
name: 'Example1'
4028
}
4129
</script>
42-
43-
<style lang="sass" scoped>
44-
.slide
45-
align-items: center
46-
color: #fff
47-
display: flex
48-
height: 300px
49-
justify-content: center
50-
51-
h3
52-
font-size: 32px
53-
font-weight: 300
54-
55-
// Slides backgrounds
56-
$colors: #f1c40f #e67e22 #e74c3c #9b59b6 #3498db #2ecc71
57-
58-
@for $i from 1 through length($colors)
59-
$color: nth($colors, $i)
60-
61-
.slide--#{$i}
62-
background-color: $color
63-
64-
</style>

‎demo/examples/Example2.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<section class="section section--demo-1">
3+
<div class="container">
4+
<div class="row">
5+
<div class="col-xs-12">
6+
<h2 class="section__title"><strong>#2</strong> demo</h2>
7+
<p class="section__description">vue-agile as a full size image carousel with custom styles for
8+
arrows and dots indicators</p>
9+
</div>
10+
</div>
11+
12+
<div class="row">
13+
<div class="col-xs-12">
14+
<p class="codepen" data-height="582" data-theme-id="dark" data-default-tab="result" data-user="lukaszflorczak" data-slug-hash="ROJKQg" style="height: 582px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="vue-agile – full size image carousel with custom styles for arrows and dots indicators">
15+
<span>See the Pen <a href="https://codepen.io/lukaszflorczak/pen/ROJKQg/">
16+
vue-agile – full size image carousel with custom styles for arrows and dots indicators</a> by Lukasz Florczak (<a href="https://codepen.io/lukaszflorczak">@lukaszflorczak</a>)
17+
on <a href="https://codepen.io">CodePen</a>.</span>
18+
</p>
19+
</div>
20+
</div>
21+
</div>
22+
</section>
23+
</template>
24+
25+
26+
<script>
27+
export default {
28+
name: 'Example2'
29+
}
30+
</script>

‎demo/examples/Example3.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<section class="section section--demo-1">
3+
<div class="container">
4+
<div class="row">
5+
<div class="col-xs-12">
6+
<h2 class="section__title"><strong>#3</strong> demo</h2>
7+
<p class="section__description">vue-agile with autoplay and fade effect</p>
8+
</div>
9+
</div>
10+
11+
<div class="row">
12+
<div class="col-xs-12">
13+
<p class="codepen" data-height="582" data-theme-id="dark" data-default-tab="css,result" data-user="lukaszflorczak" data-slug-hash="xezgmO" style="height: 582px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="vue-agile – fade effect and autoplay">
14+
<span>See the Pen <a href="https://codepen.io/lukaszflorczak/pen/xezgmO/">
15+
vue-agile – fade effect and autoplay</a> by Lukasz Florczak (<a href="https://codepen.io/lukaszflorczak">@lukaszflorczak</a>)
16+
on <a href="https://codepen.io">CodePen</a>.</span>
17+
</p>
18+
</div>
19+
</div>
20+
</div>
21+
</section>
22+
</template>
23+
24+
25+
<script>
26+
export default {
27+
name: 'Example3'
28+
}
29+
</script>

0 commit comments

Comments
 (0)