Puppertino

/

Examples

/

Segmented controls

# Segmented controls

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.

### Note on Previous Versions

In earlier versions of Puppertino, segmented controls were exclusively links. In the latest version, you now have the option to use either Buttons or Links, offering greater flexibility for appropriate actions while maintaining proper semantics and accessibility.

## General Usage of the segmented controls.

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.

Roadmap

Usage:

    <div class="p-segmented-controls">
      <a href="#" class="active">Roadmap</a>
      <a href="#">Satelite</a>
    </div>

## Modifier classes.

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:

Doom Quake
FIFA PES
Thing Stuff Other
Can Dog Pup
Mini May Moe

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>

## Color customization.

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:

Roadmap Satelite
Roadmap Satelite

Usage:

    <div class="p-segmented-controls p-segmented-grey">
      <a href="#" class="active">Roadmap</a>
      <a href="#">Satelite</a>
    </div>

## One more thing.

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!