Segmented Control
A compact button group that lets users switch between a set of mutually exclusive views or modes.
Basic selection
Mutually exclusive option group. Each item emits an update event with the selected value.
<diwa-segmented-control value="week">
<diwa-segmented-control-item value="day">Day</diwa-segmented-control-item>
<diwa-segmented-control-item value="week">Week</diwa-segmented-control-item>
<diwa-segmented-control-item value="month">Month</diwa-segmented-control-item>
</diwa-segmented-control>Dense mode (compact)
Use compact to enable dense mode and reduce item height for toolbars and dense layouts.
<diwa-segmented-control value="normal" compact>
<diwa-segmented-control-item value="compact">Compact</diwa-segmented-control-item>
<diwa-segmented-control-item value="normal">Normal</diwa-segmented-control-item>
<diwa-segmented-control-item value="comfortable">Comfortable</diwa-segmented-control-item>
</diwa-segmented-control>Disabled
Setting disabled on the container propagates to all child items.
<diwa-segmented-control value="week" disabled>
<diwa-segmented-control-item value="day">Day</diwa-segmented-control-item>
<diwa-segmented-control-item value="week">Week</diwa-segmented-control-item>
<diwa-segmented-control-item value="month">Month</diwa-segmented-control-item>
</diwa-segmented-control>