Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
stories
tests
SegmentedControl.css
SegmentedControl.js
index.js
readme.md

readme.md

SegmentedControl (DEPRECATED)

Creates a split button set that can be used for filters, tabs, and other subnavigation.

Usage

<SegmentedControl> will accept one or more <Button> components as children. Each child button should have its own unique id prop.

import { SegmentedControl } from '@folio/stripes/components';
// ...
/* define a handler for activation.
* It should accept an object containing an 'id' key.
* This will be equal to the 'id' prop of the clicked/selected button
* from the control.
*/

  handleActivate({id}) {
    this.setState({
      activeTab: id,
    });
  }

// ...
<SegmentedControl activeId={this.state.activeTab} onActivate={this.handleActivate}>
  <Button id="test">test</Button>
  <Button id="it">it</Button>
  <Button id="out">out</Button>
</SegmentedControl>

Additionally, each child <Button> can have its own onClick handler as well for handing other functionality.

Props

Name type description default required
tag string Set the HTML tag used to wrap the button set. 'nav'
className string Add a custom className to SegmentedControl
activeId string Which of the child <Button>s gets "active" styling
onActivate func Handler called when a child <Button> is clicked
children node Set of <Button>s.
You can’t perform that action at this time.