Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Nebula CSS RoundedSwitch

Revision as of 13:49, 30 July 2020 by Laurent.caron.gmail.com (Talk | contribs) (Created page with "< Back to Nebula Main Page ==Introduction== File:Css_roundedswitch.png This page explains how to use the CSS theming for the '''Rounded Switch''' widget. __...")

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

< 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

Back to the top