veams-component-comparer

5.1.1 • Public • Published

npm version Gitter Chat

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.

Readme

Keywords

Package Sidebar

Install

npm i veams-component-comparer

Weekly Downloads

1

Version

5.1.1

License

MIT

Last publish

Collaborators

  • andy-gutsche
  • sebastian-fitzner