❤
npm
Sign UpSign In

boundless-segmented-control

1.1.0 • Public • Published

SegmentedControl

SegmentedControl has many potential uses, the most common being:

  1. The controls for a tabbed view
  2. A mode switch

Essentially, it behaves like a radio group without actually using input controls. Only one option can be selected at a time.

Component Instance Methods

  • getSelectedOption() retrieves the option that is selected
  • getSelectedOptionIndex() retrieves the index of the option that is selected
  • selectOption(option) allows for programmatic switching of the active SegmentedControl option
  • selectOptionByKey(key, value) allows for programmatic switching of the active SegmentedControl option using a unique key
  • selectOptionIndex(index) allows for programmatic switching of the active SegmentedControl option by index

Installation

npm i boundless-segmented-control --save

Then use it like:

/** @jsx createElement */
 
import { capitalize, map } from 'lodash';
import { createElement, PureComponent } from 'react';
 
import SegmentedControl from 'boundless-segmented-control';
import Image from 'boundless-image';
 
export default class SegmentedControlDemo extends PureComponent {
    state = {
        selectedGroupIndex: 0,
        groups: [ {
            key: 'galaxies',
            images: [
                { alt: 'Triangulum (M33)', src: 'https://c1.staticflickr.com/5/4128/5043159769_f382995a9b_b.jpg' },
                { alt: 'Andromeda (M31)', src: 'https://c1.staticflickr.com/7/6215/6242076308_d01dccd1b4_b.jpg' },
                { alt: 'Milky Way Galactic Core', src: 'https://c2.staticflickr.com/6/5236/5896162967_a656cf460a_b.jpg' },
                { alt: 'M77', src: 'http://farm9.static.flickr.com/8668/15864469305_b3db67dd1d_m.jpg' },
                { alt: 'Whirlpool (M51)', src: 'https://apod.nasa.gov/apod/image/0602/m51center_hst.jpg' },
            ],
        }, {
            key: 'nebulae',
            images: [
                { alt: 'Horsehead', src: 'https://c1.staticflickr.com/9/8244/8663227196_1e3719be69_b.jpg' },
                { alt: 'Dust of Orion', src: 'https://c1.staticflickr.com/5/4113/5216868239_b53b8d5e80_b.jpg' },
                { alt: 'Carina', src: 'https://c1.staticflickr.com/3/2796/4398656115_ceb9a987ce_b.jpg' },
                { alt: 'Trifid', src: 'https://c1.staticflickr.com/1/468/19550653503_e4e0017579_b.jpg' },
                { alt: 'Medusa', src: 'https://s-media-cache-ak0.pinimg.com/736x/df/5f/71/df5f7105d0de64246395fdda57f51ddf.jpg' },
            ],
        }, {
            key: 'planets',
            images: [
                { alt: 'Mercury', src: 'https://c1.staticflickr.com/9/8228/8497927563_00dcb3fe09_b.jpg' },
                { alt: 'Venus', src: 'http://vedichealing.com/wp-content/uploads/2013/03/Venusflickr-300x300.jpg' },
                { alt: 'Earth', src: 'https://c1.staticflickr.com/3/2084/2222523486_5e1894e314_b.jpg' },
                { alt: 'Mars', src: 'https://c2.staticflickr.com/4/3079/3191775310_bc6a8234d3.jpg' },
                { alt: 'Jupiter', src: 'https://c2.staticflickr.com/4/3935/15652333232_6b44ff9cbf_b.jpg' },
            ],
        } ],
    }
 
    handleOptionSelected = (_, index) => this.setState({ selectedGroupIndex: index })
 
    render() {
        return (
            <div className='demo-segmented-control'>
                <p>Which astronomical features would you like to view?</p>
                <SegmentedControl
                    options={map(this.state.groups, (group) => ({ children: capitalize(group.key) }))}
                    onOptionSelected={this.handleOptionSelected} />
                <br />
                <div className='spread'>
                    {this.state.groups[this.state.selectedGroupIndex].images.map((props) => (
                        <Image key={props.alt} {...props} />
                    ))}
                </div>
            </div>
        );
    }
}

SegmentedControl can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:

npm i boundless --save

the ES6 import statement then becomes like:

import { SegmentedControl } from 'boundless';

Props

Note: only top-level props are in the README, for the full list check out the website.

Required Props

  • options · prop objects to be applied against the SegmentedControl buttons, accepts any valid React props

    #### Example

    options={[{
        children: 'Foo',
        className: 'foo',
    }, {
        children: <span>Bar</span>,
        'data-id': 'bar',
    }]}
    Expects Default Value
    arrayOf(object) []

Optional Props

  • * · any React-supported attribute

    Expects Default Value
    any n/a

  • defaultOptionSelectedIndex · sets the initial selected option on first mount

    Expects Default Value
    number 0

  • onOptionSelected · called when a child element becomes selected with the option and option index

    Expects Default Value
    function () => {}

  • optionComponent · provide a customized component type if desired, either a HTML element name or ReactComponent

    Expects Default Value
    string or function 'button'

Reference Styles

Stylus

You can see what variables are available to override in variables.styl.

// Redefine any variables as desired, e.g:
color-accent = royalblue
 
// Bring in the component styles; they will be autoconfigured based on the above
@require "node_modules/boundless-segmented-control/style"

CSS

If desired, a precompiled plain CSS stylesheet is available for customization at /build/style.css, based on Boundless's default variables.

Readme

Keywords

Package Sidebar

Install

npm i boundless-segmented-control

Repository

github.com/enigma-io/boundless

Homepage

boundless.js.org/SegmentedControl

Weekly Downloads

2

Version

1.1.0

License

MIT

Last publish

Collaborators

  • sighrobot
Try on RunKit
Report malware