Directory

OnOffSwitch

Valo Theme Style On/Off Switch

View larger

Close

View larger

Close

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;
}

Links

• Author Homepage
• Issue Tracker
• Source Code

Compatibility