TwentyTwenty
A small component to quickly let users see the differences between 2 images. Based on the work I did for ZURB's TwentyTwenty plugin.
Looking for Vue 2 support? Use the v2 branch.
Installation
$ npm install vue-twentytwenty --save
Or download the latest release using:
- https://unpkg.com/vue-twentytwenty/dist/vue-twentytwenty.umd.min.js
- https://unpkg.com/vue-twentytwenty/dist/vue-twentytwenty.css
Usage
TwentyTwenty is a UMD module, which can be used as a module in both CommonJS and AMD modular environments. When in a non-modular environment, TwentyTwenty will be registered as a global variable.
ES6
import 'vue-twentytwenty/dist/vue-twentytwenty.css';
import TwentyTwenty from 'vue-twentytwenty';
export default {
// ...
components: {
TwentyTwenty
}
// ...
};It can then be used like so:
<TwentyTwenty
before="//placehold.it/600x200/E8117F/FFFFFF"
after="//placehold.it/600x200/CCCCCC/FFFFFF" />CommonJS
var Vue = require('vue')
var TwentyTwenty = require('vue-twentytwenty')
var YourComponent = Vue.extend({
// ...
components: {
'twentytwenty': TwentyTwenty
},
// ...
})Browser
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="//unpkg.com/vue-twentytwenty/dist/vue-twentytwenty.css" />
</head>
<body>
<div id="app">
<twenty-twenty
before="//placehold.it/600x200/E8117F/FFFFFF"
after="//placehold.it/600x200/CCCCCC/FFFFFF" />
</div>
<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/vue-twentytwenty/dist/vue-twentytwenty.umd.min.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>Props
| Props | Description | Required | Type | Default |
|---|---|---|---|---|
| before | URL of before image | true | String | - |
| beforeLabel | When hovering over image what label should show up over before image | false | String | - |
| after | URL of after image | true | String | - |
| afterLabel | When hovering over image what label should show up over after image | false | String | - |
| offset | How far from the left the slider should be on load (between 0 and 1) | false | Number | 0.5 |
| keyboardStep | How far the slider should be moved on arrow key press (between 0 and 1) | false | Number | 0.2 |
Usage
Simple
<template>
<TwentyTwenty
before="//placehold.it/600x200/E8117F/FFFFFF"
after="//placehold.it/600x200/CCCCCC/FFFFFF" />
</template>
<script>
import 'vue-twentytwenty/dist/vue-twentytwenty.css';
import TwentyTwenty from 'vue-twentytwenty';
export default {
components: {
TwentyTwenty
}
};
</script>Advanced
<template>
<TwentyTwenty
offset="0.7"
before="//placehold.it/600x200/E8117F/FFFFFF"
beforeLabel="BEFORE"
after="//placehold.it/600x200/CCCCCC/FFFFFF"
afterLabel="AFTER" />
</template>
<script>
import 'vue-twentytwenty/dist/vue-twentytwenty.css';
import TwentyTwenty from 'vue-twentytwenty';
export default {
components: {
TwentyTwenty
}
};
</script>Publish
From a clean repository (no pending changes) run the following:
yarn version --patch
git push --follow-tags