Welcome to the StepOne components documentation
StepOne Fundation
StepOne Modules
ContentSwitcher
The ContentSwitcher is a styled component that toggles the visible information.
ContentSwitcher Props
| Name | Use | Type | Definition |
| defaultActiveItem | optional | string | Indicates the active tab when the component is rendered. |
| small | optional | boolean | Indicates the small size of the content-switcher component. |
| divider | optional | boolean | Add separator between content-switcher items. |
| className | optional | string | Add class to content-switcher component. |
| icon | optional | any | Add icon to content-switcher component. |
| badge | optional | number | Add badge to content-switcher component. |
| id | optional | string | Identifies the content-switcher item. |
| title | optional | string | Add title to content-switcher item. |
Examples
Simple ContentSwitcher example
Example of a simple ContentSwitcher with title and id props passed.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae sunt natus possimus labore similique consectetur vero odio nemo ipsam aperiam earum modi sit quia harum, vel aliquid commodi illo quaerat, pariatur ullam quam numquam illum quisquam porro. Amet cupiditate exercitationem fugiat harum recusandae et, neque sapiente voluptas ut at ex. 2
Small ContentSwitcher example
Example of a ContentSwitcher with small props passed.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae sunt natus possimus labore similique consectetur vero odio nemo ipsam aperiam earum modi sit quia harum, vel aliquid commodi illo quaerat, pariatur ullam quam numquam illum quisquam porro. Amet cupiditate exercitationem fugiat harum recusandae et, neque sapiente voluptas ut at ex. 2
ContentSwitcher with icons example
Example of a ContentSwitcher with icon props passed.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae sunt natus possimus labore similique consectetur vero odio nemo ipsam aperiam earum modi sit quia harum, vel aliquid commodi illo quaerat, pariatur ullam quam numquam illum quisquam porro. Amet cupiditate exercitationem fugiat harum recusandae et, neque sapiente voluptas ut at ex. 2
ContentSwitcher with badges example
Example of a ContentSwitcher with badge props passed.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae sunt natus possimus labore similique consectetur vero odio nemo ipsam aperiam earum modi sit quia harum, vel aliquid commodi illo quaerat, pariatur ullam quam numquam illum quisquam porro. Amet cupiditate exercitationem fugiat harum recusandae et, neque sapiente voluptas ut at ex. 2
ContentSwitcher with divider example
Example of a ContentSwitcher with divider props passed.
Disabled ContentSwitcher example
Example of a ContentSwitcher with disabled props passed.