Nebula CSS RoundedSwitch

< Back to Nebula Main Page

Introduction

This page explains how to use the CSS theming for the Rounded Switch widget.

Installation

In you e4 application you can install :

• The plugin org.eclipse.nebula.widgets.roundedswitch.css OR
• The feature org.eclipse.nebula.widgets.roundedswitch.css.feature

Properties

Border Width

SWT Method	Impact	CSS Property Name	CSS Example
setBorderWidth(integer)	Change the border width	switch-border-width	RoundedSwitch { switch-border-width: 3px; }

Colors

You can customize the widget for 4 states

• Widget enabled and checked
• Widget enabled and unchecked
• Widget disabled and checked
• Widget disabled and unchecked

For each state you have to specify a pseudo state : checkedEnabled, uncheckedEnabled, checkedDisabled, uncheckedDisabled

SWT Method	Impact	CSS Property Name	CSS Example
setBorderColorXXX(Color)	Set the border color of the rounded rectangke	switch-border-color	RoundedSwitch { switch-border-color: #75B936; }
setCircleColorXXX(Color)	Set the background color of the circle	switch-circle-color	RoundedSwitch { switch-circle-color: darkred; }
setBackgroundColorXXX(Color)	Set the background color of the rounded rectangke	switch-background-color	RoundedSwitch { switch-background-color: #75B936; }

Examples

Here is a full example :

/* 
CSS for Rounded Switch
*/

RoundedSwitch  {
  switch-border-width:2px;
}

.custom:checkedEnabled {
  switch-border-color: #75B936;
  switch-circle-color: #FFFFFF;
  switch-background-color: #75B936;
}

.custom:uncheckedEnabled {
  switch-border-color: #FF0000;
  switch-circle-color: darkred;
  switch-background-color: #FF0000;	
}

.custom:checkedDisabled {
  switch-border-color: #C9C9C9;
  switch-circle-color: #FFFFFF;
  switch-background-color: #C9C9C9;
}

.custom:uncheckedDisabled {
  switch-border-color: #C9C9C9;
  switch-circle-color: #FFFFFF;
  switch-background-color: #C9C9C9;	
}

An e4 example application called org.eclipse.nebula.widgets.roundedswitch.example.e4 shows how to customize the Rounded Switch widget.

This example is also available here : org.eclipse.nebula.widgets.roundedswitch.example.e4