Skip to main content
Jump to: navigation, search

Nebula CSS RoundedSwitch

< Back to Nebula Main Page

Introduction

Css roundedswitch.png

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

Copyright © Eclipse Foundation, Inc. All Rights Reserved.