Notice: This Wiki is now read only and edits are no longer possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.
Difference between revisions of "Nebula CSS Grid"
(Created page with "< Back to Nebula Main Page ==Introduction== This page explains how to use the CSS theming for the '''Grid''' widget. __TOC__ ==Installation== In you e4 applica...") |
(→General Properties) |
||
Line 29: | Line 29: | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <td> | + | <td>/</td>win7 |
− | <td> | + | <td>Change the theme of the grid. For the moment, the only accepted value is <b>win7</b></td> |
− | <td>grid- | + | <td>grid-theme</td> |
− | <td> | + | <td>Grid { theme: 30px; }</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <td> | + | <td>setCellHeaderSelectionBackground(Color)</td> |
− | <td> | + | <td>Sets the background color of column and row headers displayed when a cell in the row or header is selected.</td> |
− | <td>grid- | + | <td>grid-cell-header-selection-background-color</td> |
− | <td> | + | <td>Grid { grid-cell-header-selection-background-color: #ffffcc; }</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <td> | + | <td>setHeaderVisible(boolean)</td> |
− | <td> | + | <td>Marks the receiver's header as visible if the argument is true, and marks it invisible otherwise.</td> |
− | <td>grid- | + | <td>grid-header-visible</td> |
− | <td> | + | <td>Grid { grid-header-visible: false; }</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <td> | + | <td>setFooterVisible(boolean)</td> |
− | <td>Set | + | <td>Marks the receiver's footer as visible if the argument is true, and marks it invisible otherwise.</td> |
− | <td>grid-color</td> | + | <td>grid-footer-visible</td> |
− | <td> | + | <td>Grid { grid-footer-visible: false; }</td> |
+ | </tr> | ||
+ | <tr> | ||
+ | <td>setItemHeight(int)</td> | ||
+ | <td>Set the line height of the items (in pixels)</td> | ||
+ | <td>grid-item-height</td> | ||
+ | <td>Grid { grid-item-height: 30px; }</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>setItemHeaderWidth(int gridLineWidth)</td> | ||
+ | <td>Sets the row header width to the specified value. This automatically disables the auto width feature of the grid.</td> | ||
+ | <td>grid-item-header-width</td> | ||
+ | <td>Grid { grid-item-header-width: 5px; }</td> | ||
+ | </tr> | ||
+ | <td>setLineColor(Color)</td> | ||
+ | <td>Sets the line color.</td> | ||
+ | <td>grid-line-color</td> | ||
+ | <td>Grid { grid-line-color: #808080; }</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>setLinesVisible(boolean)</td> | ||
+ | <td>Sets the line visibility.</td> | ||
+ | <td>grid-lines-visible</td> | ||
+ | <td>Grid { grid-lines-visible: false; }</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>setTreeLinesVisible(boolean)</td> | ||
+ | <td>Sets the tree line visibility.</td> | ||
+ | <td>grid-tree-lines-visible</td> | ||
+ | <td>Grid { grid-tree-lines-visible: false; }</td> | ||
</tr> | </tr> | ||
</table> | </table> |
Revision as of 12:29, 26 March 2020
Introduction
This page explains how to use the CSS theming for the Grid widget.
Contents
Installation
In you e4 application you can install :
- The plugin org.eclipse.nebula.widgets.grid.css OR
- The feature org.eclipse.nebula.widgets.grid.css.feature
Properties
General Properties
These properties allow the developer to customize the grid displayed in the background.
SWT Method | Impact | CSS Property Name | CSS Example |
---|---|---|---|
/ | win7Change the theme of the grid. For the moment, the only accepted value is win7 | grid-theme | Grid { theme: 30px; } |
setCellHeaderSelectionBackground(Color) | Sets the background color of column and row headers displayed when a cell in the row or header is selected. | grid-cell-header-selection-background-color | Grid { grid-cell-header-selection-background-color: #ffffcc; } |
setHeaderVisible(boolean) | Marks the receiver's header as visible if the argument is true, and marks it invisible otherwise. | grid-header-visible | Grid { grid-header-visible: false; } |
setFooterVisible(boolean) | Marks the receiver's footer as visible if the argument is true, and marks it invisible otherwise. | grid-footer-visible | Grid { grid-footer-visible: false; } |
setItemHeight(int) | Set the line height of the items (in pixels) | grid-item-height | Grid { grid-item-height: 30px; } |
setItemHeaderWidth(int gridLineWidth) | Sets the row header width to the specified value. This automatically disables the auto width feature of the grid. | grid-item-header-width | Grid { grid-item-header-width: 5px; } | setLineColor(Color) | Sets the line color. | grid-line-color | Grid { grid-line-color: #808080; } |
setLinesVisible(boolean) | Sets the line visibility. | grid-lines-visible | Grid { grid-lines-visible: false; } |
setTreeLinesVisible(boolean) | Sets the tree line visibility. | grid-tree-lines-visible | Grid { grid-tree-lines-visible: false; } |
Columns properties
SWT Method | Impact | CSS Property Name | CSS Example |
---|---|---|---|
setForeground(int channel, Color color) | Set color of the graph | channel-color-n | Oscilloscope { channel-color-0: #FF6A00; } |
setActiveForegoundColor(Color color) | Set color of the graph when active | channel-active-color-n | Oscilloscope { channel-active-color-0: blue; } |
setInactiveForegoundColor(Color color) | Set color of the graph when not active | channel-inactive-color-n | Oscilloscope { channel-inactive-color-0: darkred; } |
Examples
An e4 example application called org.eclipse.nebula.widgets.grid.example.e4 shows how to customize the Grid widget.
This example is also available here : org.eclipse.nebula.widgets.grid.example.e4