@veams/component-comparer
v1.0.1
Published
The component represents a comparison handler. It allows you to change the image via drag.
Downloads
3
Readme
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
- @veams/core - Veams Core Framework.
- @veams/query or
jquery
- Veams Query or jQuery. - @veams/component - Veams Component.
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. |