GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → rajasegar → css-toggle-component

rajasegar / css-toggle-component

Licence: MIT License
Pure CSS Toggle Buttons as a Web component

Programming Languages

CSS
56736 projects
HTML
75241 projects
javascript
184084 projects - #8 most used programming language
shell
77523 projects

Labels

webcomponentstoggle-switchestoggletoggle-buttonstogglebuttonwebcomponent

Projects that are alternatives of or similar to css-toggle-component

toggle
Vue 3 toggle component with labels, custom slots and styling options (+Tailwind CSS support).
Stars: ✭ 75 (+8.7%)
Mutual labels:  toggle-switches, toggle, toggle-buttons
react-toggle
A React UI Component to display an awesome Toggle Button control
Stars: ✭ 17 (-75.36%)
Mutual labels:  toggle-switches, toggle, toggle-buttons
MultiStateToggleButton
Android's ToggleButton offers only two states, MultiStateToggleButton fixes this by offering as many states depending on the number of drawable resources passed in.
Stars: ✭ 20 (-71.01%)
Mutual labels:  toggle, togglebutton
nuxt-feature-toggle
The nuxt feature toggle module
Stars: ✭ 78 (+13.04%)
Mutual labels:  toggle-switches, toggle
svelte-webcomponent-boilerplate
🏗 Create your HTML5 Web Component with Svelte. Made your web components with this user-friendly boilerplate
Stars: ✭ 58 (-15.94%)
Mutual labels:  webcomponents, webcomponent
capacitor-vue-ionicv4-app
sample app using capacitor vuejs and ionicv4 components
Stars: ✭ 70 (+1.45%)
Mutual labels:  webcomponents
vite-plugin-sloth
Fresh take on static site generation, using HTML-first approach to build website. Powered by ⚡️ Vite
Stars: ✭ 39 (-43.48%)
Mutual labels:  webcomponents
skills-chart-widget
Integrate skills chart from your CodersRank profile to your personal website
Stars: ✭ 25 (-63.77%)
Mutual labels:  webcomponent
shaf-toggle
Elegant, accessible toggle element. Upgrades existing <input type="checkbox" />
Stars: ✭ 28 (-59.42%)
Mutual labels:  toggle
custom-elements-manifest
Custom Elements Manifest is a file format that describes custom elements in your project.
Stars: ✭ 81 (+17.39%)
Mutual labels:  webcomponents
WebRTC-Leak-Prevent-Toggle
Toggle WebRTC leak prevention in Chromium browsers.
Stars: ✭ 16 (-76.81%)
Mutual labels:  toggle
angular-elements-sample
Demo project, that demonstrates how to generate Web Components using Angular Elements, cool stuff :)
Stars: ✭ 18 (-73.91%)
Mutual labels:  webcomponents
The-HTML-and-CSS-Workshop
A New, Interactive Approach to Learning HTML and CSS
Stars: ✭ 65 (-5.8%)
Mutual labels:  webcomponents
vaadin-checkbox
The Web Component for customized checkboxes. Part of the Vaadin components.
Stars: ✭ 18 (-73.91%)
Mutual labels:  webcomponents
highcharts-webcomponent
Highcharts Web Component usable with any Framework
Stars: ✭ 21 (-69.57%)
Mutual labels:  webcomponents
SettingsAppInSwiftUI
I have recreated a Settings App in iPhoneXR using SwiftUI concepts such as Form,Section,Toggle,Picker,Stack..etc
Stars: ✭ 37 (-46.38%)
Mutual labels:  toggle
toggler
Atom plugin - Toggle words and symbols
Stars: ✭ 21 (-69.57%)
Mutual labels:  toggle
domy
Custom Elements Storage
Stars: ✭ 77 (+11.59%)
Mutual labels:  webcomponents
greenwood
Greenwood is your workbench for the web, focused on supporting modern web standards and development to help you create your next project.
Stars: ✭ 48 (-30.43%)
Mutual labels:  webcomponents
starter-simba
Lion-based Design System
Stars: ✭ 18 (-73.91%)
Mutual labels:  webcomponents
View All Similar Projects ➔

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].