css-toggle-component
Pure CSS Toggle Web Component
Last updated 2 years ago by rajasegar .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install css-toggle-component 
SYNC missed versions from official npm registry.

npm version dependencies Status devDependencies Status

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

<css-toggle theme="slide"></css-toggle>
<css-toggle theme="move"></css-toggle>
<css-toggle on-label="YES" off-label="NO"></css-toggle>

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

Current Tags

  • 1.0.4                                ...           latest (2 years ago)

5 Versions

  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dev Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |