rc-segmented

React Segmented Control.

Live Demo

https://react-component.github.io/segmented/

Install

Usage

import Segmented from 'rc-segmented';
import 'rc-segmented/assets/index.css'; // import 'rc-segmented/asssets/index.less';
import { render } from 'react-dom';

render(
  <Segmented
    options={['Antd', 'Antv', 'Egg.js']}
    onChange={(value) => handleValueChange(value)}
  />,
  mountNode,
);

API

Please note that onChange API changed on v2.0.0+

| Property | Type | Default | Description | | --------- | --------- | --------- | --------- | | prefixCls | string | rc-segmented | prefixCls of this component | | className | string | '' | additional class name of segmented | | style | React.CSSProperties | | style properties of segmented | | options | Array<string | number | SegmentedOption> | [] | options for choices | | value | string | number | | value of segmented | | defaultValue | string | number | | defaultValue of segmented | | value | string | number | | currently selected value of segmented | | onChange | (value: string | number) => void | | defaultValue of segmented | | disabled | boolean | false | disabled status of segmented |

SegmentedOption

| Property | Type | Default | Description | | --------- | --------- | --------- | --------- | | label | ReactNode | | label of segmented option | | value | string | number | | value of segmented option | | className | string | '' | additional class name of segmented option | | disabled | boolean | false | disabled status of segmented option |

Development

npm install
npm start

License

rc-segmented is released under the MIT license.