Deprecated

ContentSwitcher

ContentSwitcher to switch between different contents

Import statement

import { ContentSwitcher } from "@wfp/react"

Documentation is outdated

This component will most likely be removed in the future. Please use the Tabs component instead.

Text

Be concise and specific. Titles have a max of two words.

Default selection

Based on usage, there should be a default selection. The default selection is always the first option in a switcher.

Usage with react

import { ContentSwitcher, Switch } from "@wfp/react";
import { iconAdd } from "@wfp/icons-react";

<ContentSwitcher onChange={onChangeAction}>
  <Switch
    name="one"
    text="First section"
    onClick={onClickAction}
    kind="anchor"
    href="#"
    icon={<Icon icon={iconAdd} />}
  />
  <Switch name="two" text="Second section" />
  <Switch name="three" text="Third section" />
</ContentSwitcher>

Reference

Carbon Components

References

Storybook