Class pvc.options.varia.Sides
| Constructor Attributes | Constructor Name and Description |
|---|---|
|
Describes the distances from
each of the four sides of a rectangle:
"left", "right", "top" and "bottom".
|
| Field Attributes | Field Name and Description |
|---|---|
It is used to describe the margins and the paddings of panels.
It is possible to specify any combination of the side properties.
All side properties support values in absolute or relative units:
- absolute
- if it is a number or a numeric string, the measure is in pixel units
- relative
- if it is a numeric string with a "%" suffix, the measure is a percentage of some reference size; usually, the reference size is the size of the corresponding container panel side ("width" if side is "left" or "right", or "height" otherwise)
Special properties
The special property, all, affects all unspecified properties at once.
The special property, width, is interpreted as if both "left" and "right" had been specified, with half the value.
The special property, height, is interpreted as if both "top" and "bottom" had been specified, with half the value.
When all, width, or height are specified, they are evaluated in that order, and before normal properties.
JSON syntax example
The following is an example of a sides-structured object, the hypothetical margins of a legend panel:
var legendMargins = {left: 10, right: '20', all: '15%'};
It says that
the left margin has 10 pixels,
the right margin has 20 pixels, and
the top and bottom margins have each
the size of 15 percent of the legend panel's parent client height.
Single number or numeric string interpretation
All chart options of type Sides allow specifying a number or a string of a single number, possibly followed by a "%" sign, instead of the JSON form, as meaning all properties.String syntax
All chart options of type Sides also allow specifying a CSS2-like margins string, http://www.w3.org/TR/CSS21/box.html#propdef-margin.The following shows the equivalence between the string and JSON syntax:
var margins1 = '1'; // {all: '1'}
var margins2 = '1 2'; // {top: '1', bottom: '1', right: '2', left: '2'}
var margins3 = '1 2 3'; // {top: '1', bottom: '3', right: '2', left: '2'}
var margins4 = '1 2 3 4'; // {top: '1', bottom: '3', right: '2', left: '4'}