Directory

← Back

vcf-toggle-button

Vaadin Component Factory Toggle Button.

Author

Rating

Popularity

<100

<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

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

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

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
Released
2020-11-24
Maturity
IMPORTED
License
Other

Compatibility

Framework
Polymer 3.0+
Browser
Browser Independent

vcf-toggle-button - Vaadin Add-on Directory

Vaadin Component Factory Toggle Button. vcf-toggle-button - Vaadin Add-on Directory
# <vcf-toggle-button> ## Demo https://vcf-toggle-button.netlify.com/ ## Installation Install `vcf-toggle-button`: ```sh npm i @vaadin-component-factory/vcf-toggle-button --save ``` ## Usage Once installed, import it in your application: ```js import '@vaadin-component-factory/vcf-toggle-button/vcf-toggle-button.js'; ``` And use it: ```html ``` ### 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: ```javascript 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. 1. Make sure you have [npm](https://www.npmjs.com/) installed. 1. When in the `vcf-toggle-button` directory, run `npm install` to install dependencies. 1. Run `npm start` to open the demo. ## Contributing To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) 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](https://vaadin.com/support) and [Pricing](https://vaadin.com/pricing)
Online