CssCheckBox Add-on

CssCheckBox - Customizable CheckBox

View larger

Close

CssCheckBox for Vaadin 7 and Vaadin 8

CssCheckBox is CSS based CheckBox component (Can you believe that?). At this point I would like to thank for the inspiration:

• Eijsink Afrekensystemen BV for the FormCheckBox addon. This addon showed me how easy is to change the DOM of a component. This addon was used as the base of my project.
• Proto.io for the great CSS Switch. I used their generator to create the two basic CSS. So if you want to change, you should check this site how to do it: https://proto.io/freebies/onoff/

Developer Guide

Getting started

For using the component just simply create a new instance: new CssCheckBox(); The default size of the component is 60px * 24px and it is animated.

Properties

The component has three additional properties:

• Big preset
• Simple mode
• Animated

Big preset

This preset changes the dimension of the component to 100px * 40px. To apply this preset just call the setBigPreset(boolean bigPreset) method.

Simple preset

The simple component is like a normal checkbox. There is no animation, and moving switch part. To use call the setSimpleMode(boolean simpleMode) method.

Animated

This turns on-off the animation of component. Default this property is true. To turn off call the setAnimated(boolean animated) method.

Recoloring the component

If we want to recolor the component, the two css selectors can be used:

• .v-csscheckbox-inner:before - Select the OFF state of the component
• .v-csscheckbox-inner:after - Select the ON state of the component

For changing the color simply change background-color and color properties. For example:

.demo .recolored .v-csscheckbox-inner:after {
    background-color: palevioletred;
    color: palegreen;
}

.demo .recolored .v-csscheckbox-inner:before {
    background-color: palegreen;
    color: palevioletred;
}

Note: The recolored class is optional. If you don't target an exact class, it will recolor all of the controllers.

For a more comprehensive example, src/main/java/org/vaadin/addons/demo/DemoUI.java

Links

• Source Code

Compatibility