Directory

← Back

OnOffSwitch

Valo Theme Style On/Off Switch

Author

Contributors

Rating

CSS3 On/Off switches with animated transitions.

  • 0.0.1 -> Vaadin6, Vaadin7 Supported
  • 1.0.0 -> Vaadin8 Supported

Sample code

final OnOffSwitch onoffSwitch = new OnOffSwitch(false);

// Vaadin8

onOffSwitch.addValueChangeListener(event -> {
    boolean checked = event.getValue();
    System.out.println("OnOffSwitch checked : " + checked);
});


// Vaadin7

onoffSwitch.addValueChangeListener(new ValueChangeListener(){
	@Override
	public void valueChange(ValueChangeEvent event) {
		boolean checked = (boolean) event.getProperty().getValue();
		System.out.println("onoffSwitch checked : " + checked);
	}
});

$green: #40b527;

.onoffswitch-slider.on {
    background-color: $green;
    border-color: $green;
}

.onoffswitch-slider.on:before {
    border-color: $green;
}

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

OSGI Support

Released
2017-08-16
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 6.0+
Vaadin 7.0+
Vaadin 8.0+
Browser
Internet Explorer
Firefox
Opera
Safari
Google Chrome
Internet Explorer
iOS Browser
Android Browser
Internet Explorer
Windows Phone
Online