boundless-segmented-control

SegmentedControl

SegmentedControl has many potential uses, the most common being:

• The controls for a tabbed view
• 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.