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'
Attributes
PropertyTypeDefaultDescription
multiSelectbooleanfalseWhether the content switcher allows multiple selections.
valuestringThe value of the content switcher. A comma-separated list if multiSelect is true.
Slots
NameDescription
(default)The content switcher items.
Events
Event NameDescription
dds-changeFired when the content switcher is changed. *
CSS Parts
Part NameDescription
baseThe main content switcher container.
Components Content switcher item <dap-ds-content-switcher-item/> Attributes
PropertyTypeDefaultDescription
valuestringThe value of the segmented control item.
checkedbooleanfalseThe checked state of the segmented control item.
disabledbooleanfalseThe disabled state of the segmented control item.
namestringThe name of the segmented control item.
Slots
NameDescription
iconcontentThe icon content of the segmented control item.
Events

No custom events available.

CSS Parts
Part NameDescription
inputThe input of the segmented control item.