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.
CSS Custom Properties
Property NameDescription
--dds-content-switcher-min-widthThe minimum width of the content switcher (default: var(--dds-spacing-4000, 160px))
--dds-content-switcher-paddingThe padding of the content switcher (default: var(--dds-spacing-100, 4px))
--dds-content-switcher-border-widthThe border width of the content switcher (default: var(--dds-border-width-base))
--dds-content-switcher-border-colorThe border color of the content switcher (default: var(--dds-border-neutral-transparent))
--dds-content-switcher-border-radiusThe border radius of the content switcher (default: var(--dds-radius-rounded, 1000px))
--dds-content-switcher-backgroundThe background color of the content switcher (default: var(--dds-transparent-black-subtle, rgb(0 0 0 / 5%)))
--dds-content-switcher-gapThe gap between content switcher items (default: var(--dds-spacing-100, 4px))
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.
CSS Custom Properties
Property NameDescription
--dds-content-switcher-item-heightThe height of the content switcher item (default: var(--dds-spacing-800, 32px))
--dds-content-switcher-item-paddingThe padding of the content switcher item (default: var(--dds-spacing-200, 8px) var(--dds-spacing-400, 16px))
--dds-content-switcher-item-font-sizeThe font size of the content switcher item (default: var(--dds-size-sm, 14px))
--dds-content-switcher-item-font-weightThe font weight of the content switcher item (default: var(--dds-weight-bold, 700))
--dds-content-switcher-item-border-radiusThe border radius of the content switcher item (default: var(--dds-radius-large, 16px))
--dds-content-switcher-item-backgroundThe background color of the content switcher item (default: transparent)
--dds-content-switcher-item-colorThe text color of the content switcher item (default: var(--dds-text-neutral-base))
--dds-content-switcher-item-border-colorThe border color of the content switcher item (default: transparent)
--dds-content-switcher-item-checked-backgroundThe background color of the checked content switcher item (default: var(--dds-button-primary-background-enabled))
--dds-content-switcher-item-checked-colorThe text color of the checked content switcher item (default: var(--dds-text-neutral-on-inverted))
--dds-content-switcher-item-checked-border-colorThe border color of the checked content switcher item (default: var(--dds-border-neutral-transparent-interactive))