Vaadin Component Factory Toggle Button.

<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/vcf-toggle-button.js';

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 2.0

Sponsored development

Major pieces of development of this add-on has been sponsored by multiple customers of Vaadin. Read more about Expert on Demand at: Support and Pricing

Install

Link to this version
ImportedReleased 24 November 2020Other
Framework Support
Polymer 3.0+
Browser Independent
Install with
npm install @vaadin-component-factory/vcf-toggle-button"@1.0.3"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.3

Dependencies

  • @polymer/polymer#^3.0.0
  • @vaadin/vaadin-checkbox#^2.2.10
  • @vaadin/vaadin-element-mixin#^2.1.3
  • @vaadin/vaadin-lumo-styles#^1.5.0
  • @vaadin/vaadin-themable-mixin#^1.4.4