<!---
THIS IS AN AUTOGENERATED FILE. EDIT PACKAGES/BOUNDLESS-SEGMENTED-CONTROL/INDEX.JS INSTEAD.
-->
# 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

```bash
npm i boundless-segmented-control --save
```

Then use it like:


```jsx
/** @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](https://www.npmjs.com/package/boundless). This is recommended when you're getting started to avoid maintaining the package versions of several components:

```bash
npm i boundless --save
```

the ES6 `import` statement then becomes like:

```js
import { SegmentedControl } from 'boundless';
```


## Props

> Note: only top-level props are in the README, for the full list check out the [website](https://boundless.js.org/SegmentedControl).

### Required Props

- __`options`__ &middot; prop objects to be applied against the SegmentedControl buttons, accepts any valid React props
  
  #### Example
  
  ```jsx
  options={[{
      children: 'Foo',
      className: 'foo',
  }, {
      children: <span>Bar</span>,
      'data-id': 'bar',
  }]}
  ```

  Expects | Default Value
  ---     | ---
  `arrayOf(object)` | `[]`


### Optional Props

- __`*`__ &middot; any [React-supported attribute](https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes)

  Expects | Default Value
  ---     | ---
  `any` | `n/a`

- __`defaultOptionSelectedIndex`__ &middot; sets the initial selected option on first mount

  Expects | Default Value
  ---     | ---
  `number` | `0`

- __`onOptionSelected`__ &middot; called when a child element becomes selected with the option and option index

  Expects | Default Value
  ---     | ---
  `function` | `() => {}`

- __`optionComponent`__ &middot; 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](https://github.com/enigma-io/boundless/blob/master/variables.styl).

```stylus
// 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](https://github.com/enigma-io/boundless/blob/master/variables.styl).