Skip to main content
Jump to: navigation, search

Nebula CSS Grid

Revision as of 11:37, 26 March 2020 by Laurent.caron.gmail.com (Talk | contribs) (Properties)

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

< Back to Nebula Main Page

Introduction

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

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

Gridtheming.png

These properties allow the developer to customize the grid displayed in the background.

SWT Method Impact CSS Property Name CSS Example
- Change 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

These properties are used to customize all columns.

SWT Method Impact CSS Property Name CSS Example
setAlignment(int) Set the alignments of the columns. Values are left,center,right grid-columns-alignment Grid { grid-columns-alignment: center; }
setHeaderFont(Font) Set the font of the header grid-columns-header-font Grid { grid-columns-header-font: italic 12 bold "Terminal"; }
grid-columns-header-font-style

grid-columns-header-font-size
grid-columns-header-font-weight

grid-columns-header-font-family
Grid { grid-columns-header-font-style: italic;

          grid-columns-header-font-font-size: 12;
          grid-columns-header-font-font-weight: bold;

          grid-columns-header-font-family: "Terminal"; }
setFooterFont(Font) Set the font of the footer grid-columns-footer-font Grid { grid-columns-footer-font: italic 12 bold "Terminal"; }
grid-columns-footer-font-style

grid-columns-footer-font-size
grid-columns-footer-font-weight

grid-columns-footer-font-family
Grid { grid-columns-footer-font-style: italic;

          grid-columns-footer-font-font-size: 12;
          grid-columns-footer-font-font-weight: bold;

          grid-columns-footer-font-family: "Terminal"; }


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

Back to the top