SegmentedController

Description

See live demos on storybook

Storybook SegmentedController Demos

Install from Artifactory

• 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

Segmented Controller Props

| 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 |

Segmented Controller Events

| 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 |