Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

npm version Gitter Chat

Comparer

Description

The component represents a comparison handler.

It allows you to layer two images on top of each another and compare them via a draggable slider.


Requirements


Installation

Installation with Veams

veams install component comparer
veams -i c comparer

Fields

comparer.hbs

Settings

Parameter Type Value Description
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:

Parameter Type Value Description
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 {'mobile-s': false, 'mobile-m': false, 'mobile-l': false, 'tablet-s': false, 'tablet-l': false, 'desktop-s': false, 'desktop-m': false, 'desktop-l': false} Define on which viewport the module is enabled.

Sass Options

There are multiple global variables which you can change:

Parameter Default Value Description
$comparer-color-light #fff !default Handle color.

About

No description, website, or topics provided.

Resources

Packages

No packages published