Switchable dropdown/buttons/slider control
Last updated a year ago by timbrock .
UNLICENSED · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @flourish/controls 
SYNC missed versions from official npm registry.

Flourish controls

Add interchangeable controls (dropdown, buttons or slider) to a page.

How to install

npm install -s @flourish/controls

Add one or more control objects to your template state:

export var state = {
	control: {},

Import @flourish/controls into your template.yml settings.


Initialise the control outside any function:

import initControls from "@flourish/controls";
var control = initLayout(state.control);

You can also pass in optional functions for getting parsing and formatting functions. The former is required if you want to use user input and the user is using "," as the decimal separator. The latter is required if you want to format numbers to use "," as a decimal separator. For example:

import initLocalization from "@flourish/number-localization";
import initFormatter from "@flourish/number-formatter";
import state from "../core/state";

localization = initLocalization(state.localization);
formatter = initFormatter(state.formatting);

function getParser() {
	return localization.getParser();

function getFormatter() {
	return formatter(localization.getFormatterFunction());

var control = init(state.control, getParser, getFormatter);

Append the control to a container and add an on change handler: controls.appendTo(container).on("change", update);. This is usually done in the draw function.

In update you typically want to update the set of options and then call the controls own update method: controls.options(options).update();.



Appends the control to the container DOM node and injects CSS into the head if necessary. Returns the control object.


Returns the index of the currently chosen value in a sorted version of the options array.


With no argument returns the (unsorted) index of the currently selected option. If i is specified and corresponds to an index into the options array, sets the currently selected option to i. Returns the control object.


Returns the current number of options.

on(event, callback)

Add callback to the list of event handlers. Currently the only supported event is "change". Returns the control object.


With no argument returns a copy of the current list of options displayed by the current control. With an array, replaces the current options with a copy of arr and returns the control object.


Removes the control (and its resize event handler) from the DOM. Returns the control object.


Calls all the handlers assigned to event and returns the control object. Currently the only supported event type is "change".


Rebuilds the control with latest settings. Returns the control object.


With no argument returns the string value of the currently selected option. With val present changes the current index to match that of val in the options array and returns the control object. If val is not in the options array then nothing is changed but the control object is still returned.

Current Tags

  • 1.0.1                                ...           latest (a year ago)

25 Versions

  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
  • 1.0.0-alpha2                                ...           a year ago
  • 0.4.3                                ...           a year ago
  • 1.0.0-alpha1                                ...           a year ago
  • 0.4.2                                ...           a year ago
  • 0.4.1                                ...           2 years ago
  • 0.4.1-prerelease.1                                ...           2 years ago
  • 0.4.0                                ...           2 years ago
  • 0.4.0-prerelease.1                                ...           2 years ago
  • 0.3.1                                ...           2 years ago
  • 0.3.0                                ...           2 years ago
  • 0.2.3                                ...           2 years ago
  • 0.2.2                                ...           2 years ago
  • 0.2.1                                ...           2 years ago
  • 0.2.0                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
  • 0.0.7                                ...           2 years ago
  • 0.0.6                                ...           2 years ago
  • 0.0.5                                ...           2 years ago
  • 0.0.4                                ...           2 years ago
  • 0.0.3                                ...           2 years ago
  • 0.0.2                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Today 25
This Week 25
This Month 27
Last Day 0
Last Week 0
Last Month 27
Dependencies (6)
Dev Dependencies (3)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |