Style Property Reference

Top of the bounding rectangle. Property Types:

Right of the bounding rectangle. Property Types:

Bottm of the bounding rectangle. Property Types:

Left of the bounding rectangle. Property Types:

The width of the box. Property Types:

The height of the box. Property Types:

The min width a box will size to.

The min height a box will size to.

The max width a box will size to.

The max height a box will size to.

The margins on the outside of the box.

For example: margin="2 0 2 0" or margin="1 0" or margin="1". margin="1 0" would equal margin="1 0 1 0" margin="1" would equal margin="1 1 1 1".

The margin top. This would be equivalent to margin="X 0 0 0"

The margin right. This would be equivalent to margin="0 X 0 0"

The margin bottom. This would be equivalent to margin="0 0 X 0"

The margin left. This would be equivalent to margin="0 0 0 X"

Adds space to the inside of the box (inside the border).

The padding top. This would be equivalent to padding="X 0 0 0"

The padding right. This would be equivalent to padding="0 X 0 0"

The padding bottom. This would be equivalent to padding=" 0 0 X 0"

The padding left. This would be equivalent to padding="0 0 0 X"

The "clip" rectangle gets subtracted from the box's rectangle in determining the clip rect. See User Guide - Arranging Boxes for more details about clipping.

For example: clip="2 0 2 0" or clip="1 0" or clip="1". clip="1 0" would equal clip="1 0 1 0" clip="1" would equal clip="1 1 1 1".

The clip top. This would be equivalent to clip="X 0 0 0"

The clip right. This would be equivalent to clip="0 X 0 0"

The clip bottom. This would be equivalent to clip="0 0 X 0"

The clip left. This would be equivalent to clip="0 0 0 X"

Specifies whether the box uses fixed or flow positioning. The default is flow positioning. When using fixed positioning, the box is positioned at an offset from the origin of its parent and will find its own width and height. Flow positioning automatically arranges the boxes to fit within its parent box.

Specifies the box's axis when flow positioning is used. This value is used to determine whether child boxes are arranged along the horizontal or vertical axis. The default is horizontal.

Specifies the alignment of child boxes along the horizontal axis. This style allows child boxes to be aligned to the left (start), right (end), centered or stretched.

Specifies the alignment of child boxes along the vertical axis. This style allows child boxes to be aligned to the top (start), bottom (end), centered or stretched.

Specifies the amount of space between child boxes along the horizontal axis when flow layout is used.

Specifies the amount of space between child boxes along the vertical axis when flow layout is used.

Specifies how the a container box will distribute leftover space among child boxes. Setting the flex style on a child box will stretch it occupy all extra space available in the parent box. If more than one box has flex, the larger flex values will grab a proportionately larger amount of space.

Specifies the layer in which the box is to be painted. This value is used to arrange boxes along the z-axis. Boxes whose layer style is set to "below" are pained first (underneith all other boxes), followed by "stacked" boxes (in order of their zIndex), followed finally by boxes whose layer is style is set to "above".

Specify the crop value of the box.

Specify how overflow is handled when a box's children outgrow their parent box. The default is "none".

Specifies the box's zIndex value. This value is used to determine the order in which boxes are drawn on the z-axis. Higher integer values are pained last (on top). This is only valid when using layers and fixed position.

Specifies the fill of a box.

Specifies the fill repeat. Refer to the Boxely samples for examples.

Specifies how to stretch the bitmap used in the fill property.

Specifies how to slice the bitmap used in the fill property.

Specifies the origin of the fill on the x-axis. If fillRepeatOriginX and fillRepeatOriginY are left blank, they revert to the default value of 0.

Specifies the origin of the fill on the y-axis. If fillRepeatOriginX and fillRepeatOriginY are left blank, they revert to the default value of 0.

Controls how the fill's edge is drawn based on curve's radius

Controls how the fill's top left edge is drawn based on curve's radius

Controls how the fill's top right edge is drawn based on curve's radius

Controls how the fill's bottom rightedge is drawn based on curve's radius

Controls how the fill's bottom left edge is drawn based on curve's radius

The icon resource used to fill the box.

Used to apply a mask to a box. Uses alpha of mask image; areas that are transparent protect the target image (masking it out) and areas that are opaque allow the original to show through. Example: s:mask="url(#myMask)"

Specifies the color of the stroke (border) which is drawn around a box.

Specifies the width of the stroke (border) which is drawn around a box.

Specifies the layer in which the stroke around the box is drawn.

Specifies the pattern of the stroke (border) which is drawn around a box.

Specifies the radius of the corners of the stroke (border) which is drawn around a box. Larger integer values make the box's stroke appear more rounded.

Specifies the color of the drop shadow which is drawn around the box.

Specifies the radius of the drop shadow which is drawn around a box. Larger integer values make the drop shadow appear deeper.

Specifies the opacity of the drop shadow which is drawn around a box. Larger integer values make the drop shadow appear more opaque.

Specifies the left origin of the drop shadow which is drawn around a box.

Specifies the top origin of the drop shadow which is drawn around a box.

Supported values are "false" or "none", and "alpha". Alpha means to draw shadows using the box's alpha channel as a key, instead of just a rectangle corresponding to the box's bounds. Alpha keying is also slower, performance-wise.

Specifies the color of the bevel which is drawn around the box.

Specifies the radius of the bevel which is drawn around a box. Larger integer values make bevel more pronounced.

Specifies corner radius for bevels. Can be specified per-side like other rect styles.

Specifies top corner radius for bevels.

Specifies right corner radius for bevels.

Specifies bottom corner radius for bevels.

Specifies left corner radius for bevels. Can be specified per-side like other rect styles.

Horizontal offset for bevels. Works the same as shadowLeft except for bevels.

Vertical offset for bevels. Works the same as shadowTop except for bevels

Specifies the opacity of the bevel which is drawn around a box. Larger integer values make the bevel appear more opaque.

Specifies the rotation of the box, in degrees. For example, specifying a value of 90 would display the box rotated a quarter turn clockwise.

Specifies the amount that the box is scaled, relative to its pixel size. Values larger than 100 will increase the size of the box, and values less than 100 will decrease the box's size.

Using "high" attempts to filter the results when boxes are affine scaled or rotated, but is slower, performance-wise.

Transforms (moves) the box by the specified offset from its actual layout position.

The font name to be used.

The font size to be used.

Specifies if the font will be bolded.

Specifies if the font will be italicized.

Specifies if the font will be underlined.

The font color.

Orientation of the text

Sets the color that is used by the textHightlightString attribute.

The color of the text shadow

Sets the offset of the text shadow from the y axis.

Sets the offset of the text shadow from the x axis.

String value that will use the color defined in textHightlight to highlight a string in a textbox.

Controls the opacity applied to the entire box when blending it with the contents behind it.

Add the given color value to the current box color style.

Subtracts the given color value to the current box color style.

Adjusts the overall saturation of the color.

Adjusts the red channel for the current box.

Adjusts the green channel for the current box.

Adjusts the blue channel for the current box.

Adjusts the alpha channel for the current box.

Specifies how much blur you wish to apply to the box.

Used to call the animations that you would like to run on enter of the state.

Used to call the animations that you would like to run on exit of the state

will visually flip a box vertically. Hit testing will not be effected, only the visual content of the box is flipped.

Specifies the cursor you would like to use.

Any string value. Refer to each individual style property for details.

Any integer value, including positive (+) and negative (-) values.

Any positive integer value.

Any value between 0 and 360.

A percentage value, typically from 0 to 100.

A format to describe values applied to each side of a rectangle. Commonly used in CSS to specify "top right bottom left".

A 6 character hex value (#RRGGBB), an 8 character hex value containing alpha information (#AARRGGBB), or one of the 16 W3C defined color names.

An URL referring to a file, style definitions, animation definitions, etc. The format is as follows: "url(#URL)". For example: url(#buttonGradient)

Let Boxely automatically choose the appropriate value for the given property.

Disable the specified property.

A boolean value of true. Enables the associate style property.

A boolean value of false. Disables the associate style property.

Equivalent to the starting position of text according to the locale. For example, in a left-to-right locale this keyword will be equivalent to left.

The middle position.

Equivalent to the ending position of text according to the locale. For example, in a left-to-right locale this keyword will be equivalent to right.

Use the fixed layout scheme. This is similar to the way absolute layouts work in HTML.

Use the flowed layout scheme. This is similar to the way layout normally works in HTML.

Use the vertical axis to orient boxes.

Use the horizontal axis to orient boxes.

Strecth the box to align to both ends.

Place box above others in the z-axis. Boxes with this attribute are drawn last (on top of all the other boxes).

Place box below others in the z-axis. Boxes with this attribute are drawn first (under all the other boxes).

Place box between boxes that are above and below.

Indicates the top-side position.

Indicates the bottom-side position.

Indicates the left-side position.

Indicates the right-side position.

Scrolls the content within a box if it overflows.

Hides the content within a box if it overflows.

Performs the operation across the x-axis.

Performs the operation across the y-axis.

Performs the operation across both, the x-axis and y-axis.

Draw shadows using the alpha channel of the box as a key. This may result in a slight performance hit.

Draws a solid stroke around the box.

Draws a dotted stroke around the box.

Draws a medium, dotted stroke around the box.

Draws a large, dotted stroke around the box.

Draws a dot-dashed stroke around the box.

Indicates the use of a higher quality transform, at some expense of performance.

Indicates the use of a faster transform, at some expense of quality.

Display a cursor with four arrows pointing "up down left right" to indicate that something is movable.

Display an I-beam cursor to indicate that a text operation is possible.

Display a finger cursor to indicate that something is clickable.

Display a standard arrow cursor.

Display an hourglass cursor to indicate that a time consuming operation is occurring.

Display a splitter cursor to indicate that a split-pane can be resized.

Display a horizontal splitter cursor.

Display a vertical splitter cursor.

Displays an angled resize cursor to indicate that the box can be resized from the bottom right or top left.

Displays an angled resize cursor to indicate that the box can be resized from the bottom left or top right.

Displays a horizontal resize cursor to indicate that the box can be resized from the left or right.

Displays a vertical resize cursor to indicate that the box can be resized from the bottom or top.