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.
Difference between revisions of "E4/CSS/SWT Mapping"
(→Widget: CTabFolder) |
|||
(23 intermediate revisions by 5 users not shown) | |||
Line 1: | Line 1: | ||
+ | {{Warning|This page has been migrated to to https://github.com/eclipse-platform/eclipse.platform.ui/blob/master/docs/CSS.md.}} | ||
+ | |||
+ | |||
Many SWT property setting methods can be accessed via CSS. These tables show the equivalent mapping from SWT method to CSS property. They also show pseudo selectors which can be used to choose styling based on widget state. | Many SWT property setting methods can be accessed via CSS. These tables show the equivalent mapping from SWT method to CSS property. They also show pseudo selectors which can be used to choose styling based on widget state. | ||
==Mapping of SWT method to CSS property== | ==Mapping of SWT method to CSS property== | ||
Line 12: | Line 15: | ||
<td>background-color</td> | <td>background-color</td> | ||
<td>Button { background-color: #FF0000 }</td> | <td>Button { background-color: #FF0000 }</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>(vertical gradient)</td> | ||
+ | <td>background-color</td> | ||
+ | <td>Button { background-color: #FF0000 #00FF00 100% }</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>(horizontal gradient)</td> | ||
+ | <td>background-color</td> | ||
+ | <td>Button { background-color: #FF0000 #00FF00 100% false }</td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
Line 40: | Line 53: | ||
<tr> | <tr> | ||
<td>setFont(Font)</td> | <td>setFont(Font)</td> | ||
+ | <td>font</td> | ||
+ | <td>Label { font: italic 12 bold "Terminal"; }</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td></td> | ||
<td>font-style<br> | <td>font-style<br> | ||
font-size<br> | font-size<br> | ||
Line 66: | Line 84: | ||
<tr> | <tr> | ||
<td>setAlignment(int)</td> | <td>setAlignment(int)</td> | ||
− | <td>alignment</td> | + | <td>swt-alignment</td> |
− | <td>Label { alignment: up; } /* if pushbutton mode */</td> | + | <td>Label { swt-alignment: up; } /* if pushbutton mode */</td> |
</tr> | </tr> | ||
</table> | </table> | ||
Line 81: | Line 99: | ||
<tr> | <tr> | ||
<td>setAlignment(int)</td> | <td>setAlignment(int)</td> | ||
− | <td>alignment</td> | + | <td>swt-alignment</td> |
− | <td>Label { alignment: center; }</td> | + | <td>Label { swt-alignment: center; }</td> |
</tr> | </tr> | ||
Line 102: | Line 120: | ||
<tr> | <tr> | ||
<td>setMaximized(boolean)</td> | <td>setMaximized(boolean)</td> | ||
− | <td>maximized</td> | + | <td>swt-maximized</td> |
− | <td>CTabFolder { maximized: true }</td> | + | <td>CTabFolder { swt-maximized: true }</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
<td>setMinimized(boolean)</td> | <td>setMinimized(boolean)</td> | ||
− | <td>minimized</td> | + | <td>swt-minimized</td> |
− | <td>CTabFolder { minimized: true }</td> | + | <td>CTabFolder { swt-minimized: true }</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
<td>setMaximizeVisible(boolean)</td> | <td>setMaximizeVisible(boolean)</td> | ||
− | <td>maximize-visible</td> | + | <td>swt-maximize-visible</td> |
− | <td>CTabFolder { maximize-visible: true }</td> | + | <td>CTabFolder { swt-maximize-visible: true }</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
<td>setMinimizeVisible(boolean)</td> | <td>setMinimizeVisible(boolean)</td> | ||
− | <td>minimize-visible</td> | + | <td>swt-minimize-visible</td> |
− | <td>CTabFolder { minimize-visible: true }</td> | + | <td>CTabFolder {swt- minimize-visible: true }</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
<td>setMRUVisible(boolean)</td> | <td>setMRUVisible(boolean)</td> | ||
− | <td>mru-visible</td> | + | <td>swt-mru-visible</td> |
− | <td>CTabFolder { mru-visible | + | <td>CTabFolder { swt-mru-visible: true }</td> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td>setSimple(boolean)</td> | <td>setSimple(boolean)</td> | ||
− | <td>simple</td> | + | <td>swt-simple</td> |
− | <td>CTabFolder { simple: true }</td> | + | <td>CTabFolder { swt-simple: true }</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
<td>setSingle(boolean)</td> | <td>setSingle(boolean)</td> | ||
− | <td>single</td> | + | <td>swt-single</td> |
− | <td>CTabFolder { single: true }</td> | + | <td>CTabFolder { swt-single: true }</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
<td>setUnselectedCloseVisible(boolean)</td> | <td>setUnselectedCloseVisible(boolean)</td> | ||
− | <td>unselected-close-visible</td> | + | <td>swt-unselected-close-visible</td> |
− | <td>CTabFolder { unselected-close-visible: true }</td> | + | <td>CTabFolder { swt-unselected-close-visible: true }</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
<td>setUnselectedImageVisible(boolean)</td> | <td>setUnselectedImageVisible(boolean)</td> | ||
− | <td>unselected-image-visible</td> | + | <td>swt-unselected-image-visible</td> |
− | <td>CTabFolder { unselected-image-visible: true }</td> | + | <td>CTabFolder { swt-unselected-image-visible: true }</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
<td>setRenderer(CTabFolderRenderer)</td> | <td>setRenderer(CTabFolderRenderer)</td> | ||
− | <td>tab-renderer</td> | + | <td>swt-tab-renderer</td> |
− | <td>CTabFolder { tab-renderer: url(' | + | <td>CTabFolder { swt-tab-renderer: url('bundleclass://org.eclipse.e4.ui.workbench.renderers.swt/org.eclipse.e4.ui.workbench.renderers.swt.CTabRendering'); }</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <td>setSelectionBackground( | + | <td>setSelectionBackground(Color[],int[])</td> |
− | <td>selected-tabs-background</td> | + | <td>swt-selected-tabs-background</td> |
− | <td>CTabFolder { selected-tabs-background: #FF0000 #FFFFFF 100%; }</td> | + | <td>CTabFolder { swt-selected-tabs-background: #FF0000 #FFFFFF 100%; }</td> |
+ | </tr> | ||
+ | <tr> | ||
+ | <td>setBackground(Color[],int[])</td> | ||
+ | <td>swt-unselected-tabs-color</td> | ||
+ | <td>CTabFolder { | ||
+ | swt-unselected-tabs-color: #FF0000 #FFFFFF 100%; }</td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td>setTabHeight(int)</td> | <td>setTabHeight(int)</td> | ||
− | <td>tab-height</td> | + | <td>swt-tab-height</td> |
− | <td>CTabFolder { tab-height: | + | <td>CTabFolder { swt-tab-height: 10px; }</td> |
</tr> | </tr> | ||
</table> | </table> | ||
Line 178: | Line 197: | ||
<tr> | <tr> | ||
<td>setShowClose(boolean)</td> | <td>setShowClose(boolean)</td> | ||
− | <td>show-close</td> | + | <td>swt-show-close</td> |
− | <td>CTabItem { show-close: true }</td> | + | <td>CTabItem { swt-show-close: true }</td> |
</tr> | </tr> | ||
Line 186: | Line 205: | ||
===Widget: CTabFolder with e4Renderer === | ===Widget: CTabFolder with e4Renderer === | ||
+ | Note: The following examples assume that you have first set the tab-renderer to use CTabRendering (see the tab-renderer CSS property in the CTabFolder table above) | ||
<table cellpadding="5" border="1"> | <table cellpadding="5" border="1"> | ||
<tr> | <tr> | ||
Line 195: | Line 215: | ||
<tr> | <tr> | ||
<td>setOuterKeyline(Color)</td> | <td>setOuterKeyline(Color)</td> | ||
− | <td>outer-keyline-color</td> | + | <td>swt-outer-keyline-color</td> |
<td>CTabFolder { | <td>CTabFolder { | ||
− | + | swt-outer-keyline-color: #B6BCCC; }</td> | |
</tr> | </tr> | ||
<tr> | <tr> | ||
<td>setCornerRadius(int)</td> | <td>setCornerRadius(int)</td> | ||
− | <td>corner-radius</td> | + | <td>swt-corner-radius</td> |
<td>CTabFolder { | <td>CTabFolder { | ||
− | + | swt-corner-radius: 20; }</td> | |
</tr> | </tr> | ||
<tr> | <tr> | ||
<td>setShadowVisible(boolean)</td> | <td>setShadowVisible(boolean)</td> | ||
− | <td>shadow-visible</td> | + | <td>swt-shadow-visible</td> |
+ | <td>CTabFolder { | ||
+ | swt-shadow-visible: false; }</td> | ||
+ | </tr> | ||
+ | |||
+ | <tr> | ||
+ | <td>setShadowColor(Color)</td> | ||
+ | <td>swt-shadow-color</td> | ||
+ | <td>CTabFolder { | ||
+ | swt-shadow-color: #F79402; }</td> | ||
+ | </tr> | ||
+ | |||
+ | <tr> | ||
+ | <td>setSelectedTabFill(Color)</td> | ||
+ | <td>swt-selected-tab-fill</td> | ||
+ | <td>CTabFolder { | ||
+ | swt-selected-tab-fill: #F79402; }</td> | ||
+ | </tr> | ||
+ | |||
+ | <tr> | ||
+ | <td>setTabOutline(Color)</td> | ||
+ | <td>swt-tab-outline</td> | ||
<td>CTabFolder { | <td>CTabFolder { | ||
− | + | swt-tab-outline: #F79402; }</td> | |
</tr> | </tr> | ||
Line 226: | Line 267: | ||
<tr> | <tr> | ||
<td>Control</td> | <td>Control</td> | ||
− | <td>:focus</td> | + | <td>:focus †</td> |
<td>CTabFolder:focus { background-color: #FF0000; } | <td>CTabFolder:focus { background-color: #FF0000; } | ||
</tr> | </tr> |
Latest revision as of 09:41, 5 February 2024
Many SWT property setting methods can be accessed via CSS. These tables show the equivalent mapping from SWT method to CSS property. They also show pseudo selectors which can be used to choose styling based on widget state.
Contents
Mapping of SWT method to CSS property
Widget: Control
SWT Method | CSS Property Name | CSS Example |
---|---|---|
setBackground(Color) | background-color | Button { background-color: #FF0000 } |
(vertical gradient) | background-color | Button { background-color: #FF0000 #00FF00 100% } |
(horizontal gradient) | background-color | Button { background-color: #FF0000 #00FF00 100% false } |
setBackgroundImage(Image) | background-image | Button { background-image: some url } |
border-color | Button { border-color: #FF0000; } | |
border-width | Button { border-width: 3 } | |
border-style | Button { border-style: dotted } | |
setCursor(Cursor) | cursor | Shell { cursor:crosshair } |
setFont(Font) | font | Label { font: italic 12 bold "Terminal"; } |
font-style font-size |
Label { font-style: italic; font-size: 12; |
|
setForeground(Color) | color | Button { color: #FF0000 } |
Widget: Button
SWT Method | CSS Property Name | CSS Example |
---|---|---|
setAlignment(int) | swt-alignment | Label { swt-alignment: up; } /* if pushbutton mode */ |
Widget: Label
SWT Method | CSS Property Name | CSS Example |
---|---|---|
setAlignment(int) | swt-alignment | Label { swt-alignment: center; } |
Widget: CTabFolder
SWT Method | CSS Property Name | CSS Example |
---|---|---|
setBorderVisible(boolean) | border-visible | CTabFolder { border-visible: true } |
setMaximized(boolean) | swt-maximized | CTabFolder { swt-maximized: true } |
setMinimized(boolean) | swt-minimized | CTabFolder { swt-minimized: true } |
setMaximizeVisible(boolean) | swt-maximize-visible | CTabFolder { swt-maximize-visible: true } |
setMinimizeVisible(boolean) | swt-minimize-visible | CTabFolder {swt- minimize-visible: true } |
setMRUVisible(boolean) | swt-mru-visible | CTabFolder { swt-mru-visible: true } |
setSimple(boolean) | swt-simple | CTabFolder { swt-simple: true } |
setSingle(boolean) | swt-single | CTabFolder { swt-single: true } |
setUnselectedCloseVisible(boolean) | swt-unselected-close-visible | CTabFolder { swt-unselected-close-visible: true } |
setUnselectedImageVisible(boolean) | swt-unselected-image-visible | CTabFolder { swt-unselected-image-visible: true } |
setRenderer(CTabFolderRenderer) | swt-tab-renderer | CTabFolder { swt-tab-renderer: url('bundleclass://org.eclipse.e4.ui.workbench.renderers.swt/org.eclipse.e4.ui.workbench.renderers.swt.CTabRendering'); } |
setSelectionBackground(Color[],int[]) | swt-selected-tabs-background | CTabFolder { swt-selected-tabs-background: #FF0000 #FFFFFF 100%; } |
setBackground(Color[],int[]) | swt-unselected-tabs-color | CTabFolder { swt-unselected-tabs-color: #FF0000 #FFFFFF 100%; } |
setTabHeight(int) | swt-tab-height | CTabFolder { swt-tab-height: 10px; } |
Widget: CTabItem
SWT Method | CSS Property Name | CSS Example |
---|---|---|
setShowClose(boolean) | swt-show-close | CTabItem { swt-show-close: true } |
Widget: CTabFolder with e4Renderer
Note: The following examples assume that you have first set the tab-renderer to use CTabRendering (see the tab-renderer CSS property in the CTabFolder table above)
e4Renderer Method | CSS Property Name | CSS Example |
---|---|---|
setOuterKeyline(Color) | swt-outer-keyline-color | CTabFolder { swt-outer-keyline-color: #B6BCCC; } |
setCornerRadius(int) | swt-corner-radius | CTabFolder { swt-corner-radius: 20; } |
setShadowVisible(boolean) | swt-shadow-visible | CTabFolder { swt-shadow-visible: false; } |
setShadowColor(Color) | swt-shadow-color | CTabFolder { swt-shadow-color: #F79402; } |
setSelectedTabFill(Color) | swt-selected-tab-fill | CTabFolder { swt-selected-tab-fill: #F79402; } |
setTabOutline(Color) | swt-tab-outline | CTabFolder { swt-tab-outline: #F79402; } |
Pseudo classes which can be used in CSS to style SWT widgets
SWT Widgets | CSS Pseudo Selector | CSS Example |
---|---|---|
Control | :focus † | CTabFolder:focus { background-color: #FF0000; } |
Control | :visible † | Shell:visible { background-color: #FF0000; } |
Control | :enabled † | Text:enabled { background-color: #FF0000; } |
Control | :disabled † | Text:disabled { background-color: #FF0000; } |
Shell | :active | Shell:active { background-color: #FF0000; } |
Button | :checked | Button:checked { background-color: #FF0000; } |
CTabFolder | :selected | CTabFolder:selected { background-color: #FF0000; } |
CTabItem | :selected | CTabItem:selected { font-weight: bold; } |
† As of yet styles are only applied when SWT UI is initially loaded, if widget state is changed afterwards, changes will not take effect