@vaadin-component-factory/vcf-toggle-button

Vaadin Component Factory Toggle Button

Usage no npm install needed!

<script type="module">
  import vaadinComponentFactoryVcfToggleButton from 'https://cdn.skypack.dev/@vaadin-component-factory/vcf-toggle-button';
</script>

README

<vcf-toggle-button>

Demo

https://vcf-toggle-button.netlify.com/

Installation

Install vcf-toggle-button:

npm i @vaadin-component-factory/vcf-toggle-button --save

Usage

Once installed, import it in your application:

import '@vaadin-component-factory/vcf-toggle-button';

And use it:

<vcf-toggle-button></vcf-toggle-button>

Attributes

  • label: Provide a label for the toggle button.
  • checked: Changes the state of toggle button to "on".
  • disabled: Disables the toggle button.

Event

  • change: Fires whenever the state of the toggle button is changed:
document.querySelector('vcf-toggle-button').addEventListener('change', e => {
  console.log(e.detail.checked);
});

Running demo

  1. Fork the vcf-toggle-button repository and clone it locally.

  2. Make sure you have npm installed.

  3. When in the vcf-toggle-button directory, run npm install to install dependencies.

  4. Run npm start to open the demo.

Contributing

To contribute to the component, please read the guideline first.

License

Apache License 2.0