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.

Live Demo

Looking for Vue 2 support? Use the v2 branch.

Installation

$ npm install vue-twentytwenty --save

Or download the latest release using:

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

License

mhayes/vue-twentytwenty

ErrorLooks like something went wrong!

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 6

Packages 0

Used by 199

Contributors 7

Languages

Error
Looks like something went wrong!

Packages