Segmented Control

Segmented Control is a minimalistic UI control for "single choice" of a value that we use on our web application. It's easy to use and has a simple API.

All
Approvers
Administrators

Value: all. Label: All

// The Markup
<ul>
    <li data-value="all">All</li>
    <li data-value="approvers">Approvers</li>
    <li data-value="admins">Administrators</li>
</ul>

// The Javascript
$( 'ul' ).segmentedControl();

API

setOnChange

Sets the callback that will be invoked when the value changes.

$( 'ul' ).segmentedControl( 'setOnChange', callback );

setValue

Sets the value of the control. Must match one of the ones specified in the data attribute values.

$( 'ul' ).segmentedControl( 'setValue', 'approvers' );

getValue

Returns the value of the control, as specified in the data attribute values.

$( 'ul' ).segmentedControl( 'getValue' ); // approvers

getActiveLabel

Returns the text corresponding to the active value.

$( 'ul' ).segmentedControl( 'getActiveLabel' ); // Approvers

Try it

// Clone the repo
git clone https://github.com/Expensify/Segmented-Control.git

// Install dependencies
npm install
bower install

// Run the tests
npm test