Skip to content
This repository has been archived by the owner on Nov 13, 2023. It is now read-only.

Latest commit

 

History

History
155 lines (122 loc) · 3.94 KB

README.md

File metadata and controls

155 lines (122 loc) · 3.94 KB
Raw

TwentyTwenty

npm npm vue3

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