Segmented Controller component for Element React
npm install @element-public/react-segmented-controllerStorybook SegmentedController Demos
- Verify that you have access to (https://docs.int.bayer.com/cloud/devops/artifactory/)[Bayer Artifactory]
- Verify your token is correctly set up in your .npmrc as per the link above
- Verify you have the @element scope configured in your .npmrc
- @element:registry=https://artifactory.bayer.com/artifactory/api/npm/npm-platforms-engineering/
- Install the component and themes bundles
- npm i @element/react-components @element/themes
- alternatively install the component individually along with the themes bundle npm i @element/react-segmented-controller @element/themes
| Name | Type | Default | Required | Description |
| -------------------- | ------------------------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| defaultSelectedIndex | number | 0 | false | Sets the initial selected segment index (uncontrolled mode). Only used when selectedIndex is not provided. |
| label | string \| React.ReactNode | null | false | Title for entire segmented controller. |
| labels | [object] | [] | false | Array of objects for segmented buttons. Ex. [{title: 'test', leadingIcon: 'home', trailingIcon: 'home'}] |
| selectedIndex | number | undefined | false | Controls which segment is currently active (controlled mode). When provided, the component operates in controlled mode and the parent must handle state updates via onSelectSegment. |
| themeColor | string \| React.ReactNode | 'primary' | false | Primary or secondary color for component |
| Name | Default | Required | Params | Description |
| --------------- | --------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| onSelectSegment | undefined | false | 1. Name: event, Type: object, Description: Default react event object.,2. Name: data, Type: object, Description: Object containing 'index' (number) - the index of the selected segment, and 'segment' (object) - the selected segment object from labels array. | Function to be called when selecting a segment |