Content switcher

Content switchers allow users to toggle between two or more content sections within the same space on the screen.

Design system docs

 Examples Default 
<dap-ds-content-switcher>
  <dap-ds-content-switcher-item value="option1">Option 1</dap-ds-content-switcher-item>
  <dap-ds-content-switcher-item value="option2">Option 2</dap-ds-content-switcher-item>
  <dap-ds-content-switcher-item value="option3">Option 3</dap-ds-content-switcher-item>
</dap-ds-content-switcher>
Multi select

You can allow multiple selections by setting the multiSelect attribute to true. To set the value attribute you have to set a comma separated list of values.

<dap-ds-content-switcher multiSelect value="option1,option2">
  <dap-ds-content-switcher-item value="option1">Option 1</dap-ds-content-switcher-item>
  <dap-ds-content-switcher-item value="option2">Option 2</dap-ds-content-switcher-item>
  <dap-ds-content-switcher-item value="option3">Option 3</dap-ds-content-switcher-item>
</dap-ds-content-switcher>
Importing 
import { DapDSContentSwitcher } from 'dap-design-system/dist/dds'
Importing React 
import { DapDSContentSwitcherReact } from 'dap-design-system/dist/react'
Slots
NameDescription
(default)The content switcher items.
Attributes
PropertyTypeDefaultDescription
multiSelectbooleanfalseWhether the content switcher allows multiple selections.
valuestringThe value of the content switcher. A comma-separated list if multiSelect is true.
Events
Event NameDescription
dds-changeFired when the content switcher is changed.
CSS Parts
Part NameDescription
baseThe main content switcher container.