x-toggle-button

Component for simple toggle button

Usage no npm install needed!

<script type="module">
  import xToggleButton from 'https://cdn.skypack.dev/x-toggle-button';
</script>

README

Built With Stencil

Simple Toggle Button

A simple toggle button to be used in any app as a component, made using Stenciljs.

Node Modules

Run npm install x-toggle-button --save

Put a script tag similar to this <script src='node_modules/x-toggle-button/dist/toggle-button.js> in the head of your index.html Then you can use the element anywhere in your template, JSX, html etc.

Appearance

Demo

In a stencil-starter app

Run npm install x-toggle-button --save Add this import to your root component or root module: import 'x-toggle-button';

Then you can use the anywhere in your template, JSX, html etc

Parameters

Attribute Default Description
type round Available types are round and square
checked false true or false to check or uncheck the toggle button
name 'x-toggle-button' Component name
checked-color #2196F3 Any Color code in HEX
unchecked-color #CCCCCC Any Color code in HEX

Retrieving value for toggle switch

Getting the value is very easy, you can do the following

document.getElementById("toggle-button").checked

It will always return either true or false based on the current state of the toggle button.

License

Free to use and modify for personal and commercial purposes as well.

PS: Credits to w3schools.com for help in css.