Segmented controls are commonly used to toggle diffent states or views in your website or App and are greatly featured in many apps in iOS. You can use the segmented buttons by using the CSS of Segmented controls or downloading the full CSS (Not recommended if you are just going to use this component) and the JavaScript of the component.
Segmented controls are made of 2 main elements, the container and the links inside of them which can include SVGs or plain text. The container features the main class, p-segmented-controls and the links inside of it don't need to feature any class in particular, just active for the active control. There also Modifier classes to change the default look of the segmented controls.
Keep in mind that while the Segmented controls component features a JS, it does not manage states, views or any type of functionality, if you wish to manage these states you will have to create a JS that accomplishes what you want to do.
Usage:
<div class="p-segmented-controls">
<a href="#" class="active">Roadmap</a>
<a href="#">Satelite</a>
</div>
If the original look of the segmented control does not click with you right away fear not! We have created 5 different variations for any taste! Like these:
Usage:
<div class="p-segmented-controls p-segmented-radius">
<a href="#" class="active">Doom</a>
<a href="#">Quake</a>
</div>
<div class="p-segmented-controls p-segmented-radius p-segmented-internal-radius">
<a href="#" class="active">FIFA</a>
<a href="#">PES</a>
</div>
<div class="p-segmented-controls p-segmented-controls-alt">
<a href="#" class="active">Thing</a>
<a href="#">Stuff</a>
<a href="#">Other</a>
</div>
<div class="p-segmented-controls p-segmented-outline">
<a href="#" class="active">Can</a>
<a href="#">Dog</a>
<a href="#">Pup</a>
</div>
<div class="p-segmented-controls p-segmented-controls-outline-alt">
<a href="#" class="active">Mini</a>
<a href="#">May</a>
<a href="#">Moe</a>
</div>
Ah yes, beatiful customization! Well, for the segmented controls component, We've made the color customization fairly simple, just change the --color-segmented and/or --color-lighter-segment (For the lighter segmented control) variables. For example, the p-segmented-grey class (Included in the CSS) changes the color of all the segmented controls by overriding these variables, like so:
Usage:
<div class="p-segmented-controls p-segmented-grey">
<a href="#" class="active">Roadmap</a>
<a href="#">Satelite</a>
</div>
While yes, segmented controls are really sexy, please keep in mind that you should only use one word or small icons in them. Otherwise you will make the segmented control overflow and that doesn't look nice. Keep it simple, you know!