Directory

← Back

CssCheckBox Add-on

CssCheckBox - Customizable CheckBox

Author

Rating

Popularity

<100

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

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

Added backward compatibility for Vaadin 7. See org.vaadin.v7.* package.

Released
2017-05-31
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.0
Vaadin 7.1
Vaadin 7.2
Vaadin 7.3
Vaadin 7.4
Vaadin 7.5
Vaadin 7.6
Vaadin 7.7
Vaadin 8.0
Browser
Browser Independent

CssCheckBox Add-on - Vaadin Add-on Directory

CssCheckBox - Customizable CheckBox CssCheckBox Add-on - Vaadin Add-on Directory
# 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](https://vaadin.com/directory#!addon/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/](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: ```css .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
Online