Comparer
Description
The component represents a comparison handler.
It allows you to change via drag the image.
Requirements
-
Veams >= v5.0.0- Veams Framework.
Installation
Installation with Veams
veams install vc comparer
Fields
comparer.hbs
Settings
- settings.comparerContextClass {
String} [default] - Context class of component. - settings.comparerClasses {
String} - Modifier classes for component. - settings.jsOptions {
Object} - JavaScript options which gets stringified.
JavaScript Options
The module gives you the possibility to override default options:
- handle {
String} ['[data-js-item="comparer-handle"]'] - Define the handler element. - topContainer {
String} ['[data-js-item="comparer-top-container"]'] - Define the element for top container. - topContent {
String} ['[data-js-item="comparer-top-content"]'] - Define the content element in top container. - draggClass {
String} ['is-dragging'] - Define the dragging class. - dragMode {
Boolean} [true] - Enable or disable drag mode. - topContentRight {
Boolean} [false] - Reverse the drag mode direction. - disabled {
Object} [ 'desktop': false, 'tablet-large': false, 'tablet-small': false, 'mobile-large': false, 'mobile-medium': false, 'mobile-small': false ] - Define on which viewport the module is enabled.
Sass Options
There are multiple global variables which you can change:
- $comparer-color-light [
#fff] - Handle color.