1.0.1 • Published 6 years ago
@veams/component-comparer v1.0.1
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 comparerveams -i c comparerFields
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. |