# Properties

Properties are specific to the widget that is using the appearance key where the properties are defined. Some properties are translated to "style" settings on the widget DOM element, while others may only affect internal behavior.

Each widget decides how to use a property. Unlike styles, properties are not limited by CSS specs.

## Common Properties

This is the list of the common (shared) properties by all widgets. However, specific widgets may have additional themeable properties that are not listed here, and not all widgets support these properties. See the [Other Properties](#other-properties) section for more information on how to find out which properties to use in a theme.

* **padding**

  Property group: \[ *paddingTop, paddingRight, paddingBottom, paddingLeft* ]
* **paddingTop**

  The top padding in pixels.
* **paddingRight**

  The right padding in pixels.
* **paddingBottom**

  The bottom padding in pixels.
* **paddingLeft**

  The left padding in pixels.
* **backgroundColor**

  The background color of the rendered widget. It overrides the *backgroundColor* set in the styles and it is overridden by the **BackColor** set in the application.
* **textColor**

  The text color of the rendered widget. It is overridden by the **ForeColor** set in the application.
* **font**

  The widget's font. The value is either a font name defined in the fonts section or a full font definition.
* **opacity**

  A decimal between 0 (invisible) and 1 (fully visible) that defines the opacity of the widget. See [CSS3 opacity](http://www.w3schools.com/cssref/css3_pr_opacity.asp).
* **cursor**

  The name of the cursor to show when the pointer is over the widget. Allowed values: "default", "crosshair", "pointer", "move", "n-resize", "ne-resize", "e-resize", "se-resize", "s-resize", "sw-resize", "w-resize", "nw-resize", "nesw-resize", "nwse-resize", "text", "wait", "help", "not-allowed", "row-resize", "col-resize".
* **nativeContextMenu**

  Determines whether the native context menu should be enabled for this widget. Default: false.
* **minWidth**

  The minimum width of the widget in pixels.
* **maxWidth**

  The maximum width of the widget in pixels.
* **width**

  The preferred width of widget in pixels. The actual size may change depending on the *minWidth*, *maxWidth* and the layout engine used by the widget. It is overridden by the Width property set in the application.
* **minHeight**

  The minimum height of the widget in pixels.
* **maxHeight**

  The maximum height of the widget in pixels.
* **height**

  The preferred height of widget in pixels. The actual size may change depending on the *minHeight*, *maxHeight* and the layout engine used by the widget. It is overridden by the Height property set in the application.
* **allowStretchX**

  Property group: \[ *allowGrowX, allowShrinkX* ]
* **allowGrowX**

  Determines whether the widget can grow horizontally. It is used by the internal layout engines.
* **allowShrinkX**

  Determines whether the widget can shrink horizontally. It is used by the internal layout engines.
* **allowStretchY**

  Property group: \[ *allowGrowY, allowShrinkY* ]
* **allowGrowY**

  Determines whether the widget can grow vertically. It is used by the internal layout engines.
* **allowShrinkY**

  Determines whether the widget can shrink vertically. It is used by the internal layout engines.
* **margin**

  Property group: \[ *marginTop, marginRight, marginBottom, marginLeft* ]
* **marginTop**

  The top margin in pixels.
* **marginRight**

  The right margin in pixels.
* **marginBottom**

  The bottom margin in pixels.
* **marginLeft**

  The left margin in pixels.
* **alignX**

  Determines the horizontal alignment of the item in the parent layout. It is used (or ignored) by the internal layout engines.
* **alignY**

  Determines the vertical alignment of the item in the parent layout. It is used (or ignored) by the internal layout engines.
* **decoration**

  Sets the text decoration for text in the widget. Allowed values: "none", "underline", "line-through", "overline".
* **icon**

  The URL or theme image name of the icon to show in the widget. It's supported only by widgets that include a child Image element: buttons, labels, check boxes, radio buttons, ...
* **gap**

  The space, in pixels, between the icon and the label in the container widget. It's supported only by widgets that include a child Image element: buttons, labels, check boxes, radio buttons, ...
* **show**

  Determines whether the widget shows the icon, label, or both. Allowed values: "both", "label", "icon". It's supported only by widgets that include a child Image element: buttons, labels, check boxes, radio buttons, ...
* **iconPosition**

  Determines the position of the icon in relation to the text. Allowed values: "top", "right", "bottom", "left", "top-left", "bottom-left", "top-right", "bottom-right". It's supported only by widgets that include a child Image element: buttons, labels, check boxes, radio buttons, ...
* **center**

  Determines whether the content should be rendered centrally. It is used (or ignored) by the internal layout engines.
* **source**\
  URL or theme name of the image. Supports partial or full URL (including data), or simply the name of an image defined under the `images` section in the current theme.

## Other Properties

All the properties that are marked *themeable* in the widget's JavaScript code can be defined in a theme.

One way to find which properties are supported is to use the excellent [qooxdoo API viewer](http://qooxdoo.org/qxl.apiviewer/) and search for a base widget that corresponds to the Wisej.NET control. When using the API Viewer, note that themeable properties show a pencil icon.

Another way is to look at the JavaScript source code for the [Wisej.NET widgets](https://github.com/iceteagroup/wisej-js) and their [base classes](https://github.com/iceteagroup/wisej-qx/tree/master/ui) to determine which properties are themeable.

{% tabs %}
{% tab title="checkAlign property definition on wisej.web.CheckBox.js" %}

```javascript
/**
 * CheckAlign property.
 *
 * Gets or sets the horizontal and vertical alignment of the check mark.
 */
checkAlign: {
	themeable: true,
	init: "middleLeft",
	apply: "_applyCheckAlign",
	check: ["topRight", "middleRight", "bottomRight", "topLeft", "topCenter", "middleLeft", "middleCenter", "bottomLeft", "bottomCenter"]
}
```

{% endtab %}
{% endtabs %}

## Property Group

Property groups are composite properties that can set the values of other properties using a shorthand array. The code below shows a property group used to set related properties. In a theme definition file you can set a property group or a single property or both; they are applied in the order they are declared.

{% tabs %}
{% tab title="padding property group" %}

```javascript
"properties":
{
  "padding": [4, 0, 2, 4]
}
```

{% endtab %}
{% endtabs %}

The definition above is equivalent to:

{% tabs %}
{% tab title="paddingTop, paddingRight, paddingBottom, paddingLeft" %}

```javascript
"styles":
{
  "paddingTop": 4,
  "paddingRight": 0,
  "paddingBottom": 2,
  "paddingLeft": 4
}
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
Property groups that contain values for the four sides of an element follow the TRBL pattern (top, right, bottom, left).
{% endhint %}