# x-toggle-button

> Component for simple toggle button

Latest version **0.0.2** (published 2018-08-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install x-toggle-button
pnpm add x-toggle-button
yarn add x-toggle-button
bun add x-toggle-button
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2018-08-31 |
| First published | 2018-08-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 280.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Suroor Wijdan |
| Maintainers | suroorwijdan |

## Links

- npm: https://www.npmjs.com/package/x-toggle-button
- Repository: https://github.com/Xencov/stencil-toggle-button
- Issues: https://github.com/Xencov/stencil-toggle-button
- npm.io page: https://npm.io/package/x-toggle-button

## Recent versions

- 0.0.2 (latest) — 2018-08-31
- 0.0.1 — 2018-08-30

## README

![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

# 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></script> in the head of your index.html
Then you can use the element <x-toggle-button> anywhere in your template, JSX, html etc.


##Appearance
![Demo](https://raw.githubusercontent.com/Xencov/stencil-toggle-button/master/src/images/demo.png)



#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 <x-toggle-button> 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.

---
_Source: https://npm.io/package/x-toggle-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._