Duo Selector

Roseworx components have a scanDOM method which basically rescans the DOM for roseworx components and instantiates them. This is extremely useful for when you are dynamically / conditionally adding components to a page after the page load event or using Javascript frameworks like React or Vue. Simply run rwxDuoSelector.scanDOM().

Description

The Roseworx Duo Selector Component allows you to give a user 2 options and receive an answer in a sleak, sexy and animated way. This component is responsive and web accessible with keyboard navigation.

Usage

import rwxDuoSelector from 'roseworx/js/components/rwxDuoSelector';

Import the SCSS file and optionally customize using the below SCSS variables (make sure to declare them before the import);
```
@import "~roseworx/scss/components/rwxDuoSelector";
```
Use the setValues method below.

Customize

SCSS Variable Value Type Description

$rwx-duo-selector-left-background-color CSS color Backround color of the left panel

$rwx-duo-selector-right-background-color CSS color Background color of the right panel

This component makes use of the animated border effect so you can also customize those SCSS variables.

Additional Methods

These must only be called on or after the window load event.

setValues

Promise

(

Values Array Of Objects: [{displayName: String, value: String}, {displayName: String, value: String}]

)

Sets the 2 values for the Duo Selector component. displayName is what is shown to the user and value is what is returned in the promise.

						rwxDuoSelector.setValues([{displayName: '{DISPLAYNAME}', value: '{RETURN VALUE}'}, {displayName: '{DISPLAYNAME}', value: '{RETURN VALUE}'}]).then((res)=>{ console.log(res); });