mhayes / Vue Twentytwenty
Licence: mit
Image comparison utility
Stars: ✭ 182
Projects that are alternatives of or similar to Vue Twentytwenty
Draggableimageviewer
大图浏览 & 图片查看&拖拽退出。类似于微信、B站的图片 & 视频浏览器。
Stars: ✭ 153 (-15.93%)
Mutual labels: image-viewer
Jquery Ui Contextmenu
jQuery plugin that turns a jQueryUI menu widget into a context menu.
Stars: ✭ 170 (-6.59%)
Mutual labels: widget
Prayer Times Android
A useful Application with a set of tools needed by any muslim.
Stars: ✭ 158 (-13.19%)
Mutual labels: widget
Flutter cupertino settings
A Flutter widget to create an iOS settings-table (static TableView).
Stars: ✭ 161 (-11.54%)
Mutual labels: widget
Qmarkdowntextedit
A C++ Qt QPlainTextEdit widget with markdown highlighting support and a lot of other extras
Stars: ✭ 182 (+0%)
Mutual labels: widget
Clendar
Clendar - universal calendar app. Written in SwiftUI. Available on App Store
Stars: ✭ 153 (-15.93%)
Mutual labels: widget
Graphview
Flutter GraphView is used to display data in graph structures. It can display Tree layout, Directed and Layered graph. Useful for Family Tree, Hierarchy View.
Stars: ✭ 152 (-16.48%)
Mutual labels: widget
Flutter app
🔥🔥🔥本项目包括各种基本控件使用（Text、TextField、Icon、Image、Listview、Gridview、Picker、Stepper、Dialog、Slider、Row、Appbar、Sizebox、BottomSheet、Chip、Dismissible、FlutterLogo、Check、Switch、TabBar、BottomNavigationBar、Sliver等）、豆瓣电影、tubitv、每日一文、和天气、百姓生活、随机诗词、联系人、句子迷、好奇心日报、有道精品课、高德定位、音乐播放器🎵、追书神器等板块
Stars: ✭ 2,140 (+1075.82%)
Mutual labels: widget
Scriptable
Scripts and widgets for the iOS Scriptable App
Stars: ✭ 147 (-19.23%)
Mutual labels: widget
Ngx Dynamic Dashboard Framework
This is a JSON driven angular x based dashboard framework that is inspired by JIRA's dashboard implementation and https://github.com/raulgomis/angular-dashboard-framework
Stars: ✭ 160 (-12.09%)
Mutual labels: widget
Ybimagebrowser
iOS image browser / iOS 图片浏览器 (支持视频)
Stars: ✭ 2,230 (+1125.27%)
Mutual labels: image-viewer
Flutter smart select
SmartSelect allows you to easily convert your usual form select or dropdown into dynamic page, popup dialog, or sliding bottom sheet with various choices input such as radio, checkbox, switch, chips, or even custom input. Supports single and multiple choice.
Stars: ✭ 179 (-1.65%)
Mutual labels: widget
Airpodsbattery Monitor For Mac
Simple Widget to display your AirPods battery levels from the Mac Status bar
Stars: ✭ 165 (-9.34%)
Mutual labels: widget
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.
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/[email protected]/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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].