Skip to content

react-component/segmented

Folders and files

NameName
Last commit message
Last commit date

Latest commit

17b4ba3 · Jan 24, 2025

History

83 Commits
Aug 23, 2024
Jan 17, 2023
Nov 28, 2024
Nov 28, 2024
Jan 22, 2025
Jan 22, 2025
Dec 12, 2022
Jan 24, 2022
Jan 24, 2022
Dec 12, 2022
Aug 23, 2024
Jan 24, 2022
Feb 13, 2022
Jan 24, 2022
Jan 24, 2022
Jan 24, 2022
Dec 31, 2022
Jan 24, 2022
Dec 12, 2022
Jan 24, 2025
Jan 8, 2023
Jan 24, 2022

Repository files navigation

rc-segmented

NPM version npm download dumi build status Codecov bundle size

React Segmented Control.

Live Demo

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

Install

rc-segmented

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.