lukas.helcl
/
kolotoc
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity
Browse Source

componenta kolotoče

master
Lukáš Helcl 4 years ago
parent
c80c68570d
commit
862c65cb6d
5 changed files with 86 additions and 61 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      kolotoc-helcl.zip
  2. 8
      package-lock.json
  3. 8
      package.json
  4. 61
      src/App.vue
  5. 70
      src/components/kolotoc.vue

BIN
kolotoc-helcl.zip
View File

Binary file not shown.

8
package-lock.json
View File

@ -14,13 +14,13 @@
"vue-timers": "^2.0.4"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/cli-plugin-babel": "^4.5.11",
"@vue/cli-plugin-eslint": "^4.5.11",
"@vue/cli-service": "^4.5.11",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
"vue-template-compiler": "^2.6.12"
}
},
"node_modules/@babel/code-frame": {

8
package.json
View File

@ -15,13 +15,13 @@
"vue-timers": "^2.0.4"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/cli-plugin-babel": "^4.5.11",
"@vue/cli-plugin-eslint": "^4.5.11",
"@vue/cli-service": "^4.5.11",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
"vue-template-compiler": "^2.6.12"
},
"eslintConfig": {
"root": true,

61
src/App.vue
View File

@ -1,24 +1,17 @@
<template>
<div id="app">
<div v-on:click="backImg" class="arrow left">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background: new 0 0 512 512" xml:space="preserve" > <g> <g> <path d="M492,236H68.442l70.164-69.824c7.829-7.792,7.859-20.455,0.067-28.284c-7.792-7.83-20.456-7.859-28.285-0.068 l-104.504,104c-0.007,0.006-0.012,0.013-0.018,0.019c-7.809,7.792-7.834,20.496-0.002,28.314c0.007,0.006,0.012,0.013,0.018,0.019 l104.504,104c7.828,7.79,20.492,7.763,28.285-0.068c7.792-7.829,7.762-20.492-0.067-28.284L68.442,276H492 c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" /> </g> </g> </svg>
</div>
<div class="box-with-img">
<h1> {{ images[index].title }} </h1>
<img :src="images[index].src" alt="" />
<p> {{ images[index].text }} </p>
</div>
<div v-on:click="nextImg" class="arrow right">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background: new 0 0 512 512" xml:space="preserve" > <g> <g> <path d="M492,236H68.442l70.164-69.824c7.829-7.792,7.859-20.455,0.067-28.284c-7.792-7.83-20.456-7.859-28.285-0.068 l-104.504,104c-0.007,0.006-0.012,0.013-0.018,0.019c-7.809,7.792-7.834,20.496-0.002,28.314c0.007,0.006,0.012,0.013,0.018,0.019 l104.504,104c7.828,7.79,20.492,7.763,28.285-0.068c7.792-7.829,7.762-20.492-0.067-28.284L68.442,276H492 c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" /> </g> </g> </svg>
</div>
<kolotoc :images="images"/>
</div>
</template>
<script>
import kolotoc from "./components/kolotoc";
export default {
name: "App",
components: {
kolotoc
},
data: function () {
return {
images: [
@ -48,56 +41,18 @@ export default {
text: "Tohle je obrázek 5",
},
],
index: 0,
};
},
methods: {
nextImg: function () {
this.index += 1;
if (this.index > this.images.length - 1) {
this.index = 0;
}
},
backImg: function () {
this.index -= 1;
if (this.index < 0) {
this.index = this.images.length - 1;
}
},
},
};
</script>
<style>
#app {
#app > div{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.box-with-img {
width: 30%;
height: 50%;
}
.box-with-img img {
width: 100%;
height: 100%;
}
.arrow {
width: 50px;
height: 50%;
display: flex;
align-items: center;
}
.arrow.left {
padding-top: 37px;
padding-right: 15px;
}
.arrow.right {
padding-top: 37px;
padding-left: 15px;
}
.arrow.right svg {
transform: rotate(180deg);
}
</style>

70
src/components/kolotoc.vue
View File

@ -0,0 +1,70 @@
<template>
<div>
<div v-on:click="backImg" class="arrow left">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background: new 0 0 512 512" xml:space="preserve" > <g> <g> <path d="M492,236H68.442l70.164-69.824c7.829-7.792,7.859-20.455,0.067-28.284c-7.792-7.83-20.456-7.859-28.285-0.068 l-104.504,104c-0.007,0.006-0.012,0.013-0.018,0.019c-7.809,7.792-7.834,20.496-0.002,28.314c0.007,0.006,0.012,0.013,0.018,0.019 l104.504,104c7.828,7.79,20.492,7.763,28.285-0.068c7.792-7.829,7.762-20.492-0.067-28.284L68.442,276H492 c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" /> </g> </g> </svg>
</div>
<div class="box-with-img">
<h1> {{ images[index].title }} </h1>
<img :src="images[index].src" alt="" />
<p> {{ images[index].text }} </p>
</div>
<div v-on:click="nextImg" class="arrow right">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background: new 0 0 512 512" xml:space="preserve" > <g> <g> <path d="M492,236H68.442l70.164-69.824c7.829-7.792,7.859-20.455,0.067-28.284c-7.792-7.83-20.456-7.859-28.285-0.068 l-104.504,104c-0.007,0.006-0.012,0.013-0.018,0.019c-7.809,7.792-7.834,20.496-0.002,28.314c0.007,0.006,0.012,0.013,0.018,0.019 l104.504,104c7.828,7.79,20.492,7.763,28.285-0.068c7.792-7.829,7.762-20.492-0.067-28.284L68.442,276H492 c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" /> </g> </g> </svg>
</div>
</div>
</template>
<script>
export default {
props: {
images: {default: () => []}
},
data: function() {
return {
index: 0,
}
},
methods: {
nextImg: function () {
this.index += 1;
if (this.index > this.images.length - 1) {
this.index = 0;
}
},
backImg: function () {
this.index -= 1;
if (this.index < 0) {
this.index = this.images.length - 1;
}
},
}
}
</script>
<style >
.box-with-img {
width: 30%;
height: 50%;
}
.box-with-img img {
width: 100%;
height: 100%;
}
.arrow {
width: 50px;
height: 50%;
display: flex;
align-items: center;
}
.arrow.left {
padding-top: 37px;
padding-right: 15px;
}
.arrow.right {
padding-top: 37px;
padding-left: 15px;
}
.arrow.right svg {
transform: rotate(180deg);
}
</style>
Write Preview
Loading…
Cancel
Save