Segmented control
Import
Import the settings and the segemented-control scss files.
@import 'settings/all-settings';@import 'components/c.segmented-control';
Usage
The creation of an Segmented control component in your code is done using the following HTML structure:
<div class="mc-segmented-control"> <button type="button" class="mc-segmented-control__segment is-active"> <span class="mc-segmented-control__content"> <span class="mc-segmented-control__icon"></span> <span class="mc-segmented-control__label"> Label </span> </span> </button> <button type="button" size="s" class="mc-segmented-control__segment"> <span class="mc-segmented-control__content"> <span class="mc-segmented-control__label">Label</span> </span> </button></div>
Variations
Sizes
You have two sizes available for the segmented-control
For this you have to use the modifier mc-segmented-control--m
on the main div.
Full width
To display segmented-control in full width, you have to add the modifier mc-segmented-control--full
on the main div.