https://github.com/rajasegar/css-toggle-component

Pure CSS Toggle Buttons as a Web component
https://github.com/rajasegar/css-toggle-component

toggle toggle-buttons toggle-switches togglebutton webcomponent webcomponents

Last synced: 23 days ago
JSON representation

Pure CSS Toggle Buttons as a Web component

• Host: GitHub
• URL: https://github.com/rajasegar/css-toggle-component
• Owner: rajasegar
• License: mit
• Created: 2018-10-07T04:01:46.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-12T05:52:06.000Z (about 6 years ago)
• Last Synced: 2024-10-01T02:42:01.399Z (about 1 month ago)
• Topics: toggle, toggle-buttons, toggle-switches, togglebutton, webcomponent, webcomponents
• Language: CSS
• Homepage: https://rajasegar.github.io/css-toggle-component/
• Size: 114 KB
• Stars: 71
• Watchers: 6
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.MD
  • License: LICENSE.md

Awesome Lists containing this project

• Awesome-CSS-Resources - css-toggle-component:

README

        
[![npm version](http://img.shields.io/npm/v/css-toggle-component.svg?style=flat)](https://npmjs.org/package/css-toggle-component "View this project on npm")

[![dependencies Status](https://david-dm.org/rajasegar/css-toggle-component/status.svg)](https://david-dm.org/rajasegar/css-toggle-component)

[![devDependencies Status](https://david-dm.org/rajasegar/css-toggle-component/dev-status.svg)](https://david-dm.org/rajasegar/css-toggle-component?type=dev)

# Pure CSS Toggle Web component

Pure CSS Toggle Buttons - ON-OFF Switches

- 16 different style effects to choose from

- Keyboard Accessible (You can able to toggle using Space keys)

- Screenreader discoverability

## Install

npm install css-toggle-component

## Demo

https://rajasegar.github.io/css-toggle-component

## Usage

```html

```

## Themes

Pass on any one of the following values for different toggle effects to `theme` property.

 - slide

 - move

 - updown

 - flip

 - rotate

 - fadeout

 - slideall

 - rect-slide

 - rect-flip

 - rect-move

 - rect-hide    

 - rect-updown

 - rect-zoomin

 - rect-slide2

 - rect-slide3

 - rect-slide4

## Things to do

- Bring focus to the component when using Tab keys for navigation

- Provide option to pass on aria-label

- Tests

- Refactoring and code cleanup

- And much more...

## Credits

https://codepen.io/himalayasingh/pen/EdVzNL?editors=1000

A Pen by Himalaya Singh