@rc-component/segmented

[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url]  [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url]

[npm-image]: http://img.shields.io/npm/v/@rc-component/segmented.svg?style=flat-square
[npm-url]: http://npmjs.org/package/@rc-component/segmented
[github-actions-image]: https://github.com/react-component/segmented/actions/workflows/main.yml/badge.svg
[github-actions-url]: https://github.com/react-component/segmented/actions/workflows/main.yml
[codecov-image]: https://codecov.io/gh/react-component/segmented/branch/master/graph/badge.svg
[codecov-url]: https://codecov.io/gh/react-component/segmented/branch/master
[download-image]: https://img.shields.io/npm/dm/@rc-component/segmented.svg?style=flat-square
[download-url]: https://npmjs.org/package/@rc-component/segmented
[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/segmented
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/segmented

React Segmented Control.


Live Demo

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

Install


Usage

``js
import Segmented from '@rc-component/segmented';
import '@rc-component/segmented/assets/index.css'; // import '@rc-component/segmented/assets/index.less';
import { render } from 'react-dom';

render(
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 | ArraySegmentedOption> | [] | 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 |

$3

| 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-component/segmented is released under the MIT license.