segmented-control-css

Create IOS Style radio buttons (segmented controls) without any JavaScript code.

Official demo

Table of Contents

- Table of Contents
- Installation
- Usage
- Example
- Colors
- Animations
- Border radius
- Support
- Author
- License

Installation

``shell
npm i segmented-control-css
`

`shell
yarn add segmented-control-css
`

Then add the segmented-control.min.css file to your . The file is located in the dist folder.

`html
rel="stylesheet"
href="[path-to-segmented-control-css]/dist/segmented-control.min.css"
/>
`

You can also use the unpkg CDN.

`html
rel="stylesheet"
href="https://unpkg.com/segmented-control-css/dist/segmented-control.min.css"
/>
`

Usage

To make Segmented Control CSS work properly:

- All options are grouped inside an .segmented-control container.
- Each option should have:
- A .segmented-control-btn wrapper.
- An with an unique id.
- A with a for attribute

⚠️ Each .segmented-control-btn needs an input with an id and a label just behind. The "for" attribute of the label needs to be the same as the id of the input. ⚠️

$3

`html


To change the color of the segmented controls add the class .sc-[colorClass].

`html


To change the animation of the segmented controls use the class .sc-[animationClass].

`html


| Name | class |
| ---- | ----------- |
| Fade | sc-fade |
| Slide | sc-slide |
| Zoom | sc-zoom |

$3

| Name | class |
| ---- | ----- |
| Rounded | sc-rounded |
| Round | sc-round |

Support

Please open an issue for support.

Author

Basile Bong

License

MIT