Layout Properties

This document summarizes the layout properties you can use for UI Engine components.

`background`

Sets the background color color value of a component (shortcut to backgroundColor).

`backgroundColor`

Sets the background color value of a component.

`border`

Sets the value of the border area; uses the same value for the left, top, right, and bottom borders.

`borderBottom`

Sets the value of the bottom border to the specified one.

`borderColor`

Sets the color value of the border; uses the same value for the left, top, right, and bottom borders.

`borderHorizontal`

Sets the value of the horizontal borders (left and right) to the specified one.

`borderLeft`

Sets the value of the left border to the specified one.

`borderRadius`

This property rounds the corners of a component's outer border edge according to the specified value.

`borderRight`

Sets the value of the right border to the specified one.

`borderStyle`

Sets the style of the border; uses the same value for the left, top, right, and bottom borders.

`borderWidth`

Sets the width (thickness) of the border; uses the same value for the left, top, right, and bottom borders.

`borderTop`

Sets the value of the top border to the specified one.

`borderVertical`

Sets the value of the vertical borders (top and bottom) to the specified one.

`bottom`

Sets the bottom position of the component to the specified value.

`boxShadow`

This property adds shadow effects around a component's frame and set up one or more shadow effects.

`canShrink`

This boolean property indicates if a component can shrink its size when its parent container is resized.

`color`

Sets the foreground color value of a component's text and text decorations.

`cursor`

Sets the mouse cursor, if any, to show when the mouse pointer is over a particular component

`direction`

This property sets the direction of text, table columns, and horizontal overflow. Use rtl for languages written from right to left (like Hebrew or Arabic), and ltr for those written from left to right (like English and most other languages). By default, the prop's value is ltr.

`fontFamily`

This property specifies a prioritized list of one or more font family names and/or generic family names for the selected component.

`fontSize`

This property sets the size of the font. Changing the font size also updates the sizes of the font size-relative length units, such as em, ex, and so forth.

`fontWeight`

Sets the weight (or boldness) of the font. The weights available depend on the fontFamily that is currently set.

`fontStyle`

This property sets whether a font should be styled with a normal, italic, or oblique face from its font family.

`gap`

Layout components use this property to define the size of space separating child components.

`height`

Specifies the height (vertical dimension) of the component.

`left`

Sets the left position of the component to the specified value.

`letterSpacing`

This property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values cause characters to spread farther apart, while negative values bring characters closer together.

`lineHeight`

This property sets the height of a line box. It's commonly used to set the distance between lines of text.

`margin`

Sets the size of the margin area; uses the same value for the left, top, right, and bottom margins.

`marginBottom`

Sets the size of the bottom margin to the specified value.

`marginHorizontal`

Sets the size of the horizontal margins (left and right) to the specified value.

`marginLeft`

Sets the size of the left margin to the specified value.

`marginRight`

Sets the size of the right margin to the specified value.

`marginTop`

Sets the size of the top margin to the specified value.

`marginVertical`

Sets the size of the vertical margins (top and bottom) to the specified value.

`maxHeight`

Specifies the maximum height of an element. It prevents the current value of the height property from becoming larger than the value specified.

`maxWidth`

Specifies the maximum width of an element. It prevents the current value of the width property from becoming larger than the value specified.

`minHeight`

Specifies the minimum height of an element. It prevents the current value of the height property from becoming smaller than the value specified.

`minWidth`

Specifies the minimum width of an element. It prevents the current value of the width property from becoming smaller than the value specified.

`opacity`

This property sets the opacity of an element. Opacity is the degree to which the content behind an element is hidden. The value is a number in the range 0.0 to 1.0, inclusive, or a percentage from 0% to 100%.

`outline`

This property sets most of the outline properties in a single declaration. An outline is a line that is drawn around an element, outside the border.

`outlineWidth`

This property sets the thickness of an element's outline. An outline is a line that is drawn around an element, outside the border.

`outlineStyle`

This property sets the style of an element's outline. An outline is a line that is drawn around an element, outside the border.

`outlineColor`

This property sets the color of an element's outline.

`overflowX`

This property defines the overflow strategy when a component horizontally overflows the UI its parent provides.

`overflowY`

This property defines the overflow strategy when a component vertically overflows the UI its parent provides.

`padding`

Sets the size of the padding area; uses the same value for the left, top, right, and bottom paddings.

`paddingBottom`

Sets the size of the bottom padding to the specified value.

`paddingHorizontal`

Sets the size of the horizontal padding (left and right) to the specified value.

`paddingLeft`

Sets the size of the left padding to the specified value.

`paddingRight`

Sets the size of the right padding to the specified value.

`paddingTop`

Sets the size of the top padding to the specified value.

`paddingVertical`

Sets the size of the vertical paddings (top and bottom) to the specified value.

`radiusBottomLeft`

This property rounds the bottom-left corner of a component's outer border edge according to the specified value.

`radiusBottomRight`

This property rounds the bottom-right corner of a component's outer border edge according to the specified value.

`radiusTopLeft`

This property rounds the top-left corner of a component's outer border edge according to the specified value.

`radiusTopRight`

This property rounds the top-right corner of a component's outer border edge according to the specified value.

`right`

Sets the right position of the component to the specified value.

`textAlign`

This property sets the horizontal alignment of the inline-rendered content (e.g., text) inside its block-rendered parent.

`textAlignLast`

This property sets how the last line of a block or a line, right before a forced line break, is aligned.

`textDecoration`

This property sets the appearance of decorative lines on text.

`textDecorationLine`

This property sets the kind of decoration that is used on text in an element, such as an underline or overline.

`textDecorationColor`

This property sets the color of decorations added to text by textDecorationLine.

`textDecorationStyle`

This property sets the style of the lines specified by textDecorationLine. The style applies to all lines that are set with textDecorationLine.

`textDecorationThickness`

This property sets sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline.

`textTransform`

This property specifies how to capitalize an element's text.

`textUnderlineOffset`

This property specifies the offset distance of an underline text decoration line (applied using textDecoration) from its original position.

`textWrap`

The value of this property controls how text inside an element is wrapped.

`top`

Sets the top position of the component to the specified value.

`userSelect`

This property controls whether the user can select text.

`whiteSpace`

This property sets how white space inside an element is handled. Available values are: normal, pre, pre-wrap, pre-line, wrap, collapse, nowrap, and preserve nowrap.

`width`

Specifies the width (horizontal dimension) of the component.

`wrapContent`

This boolean property indicates if a layout container can wrap its content into multiple lines.

`zIndex`

This layout property sets the z-order of a positioned component and its children. Overlapping components with a larger z-index cover those with a smaller one.

`zoom`

This property sets the zoom level of the view. The zoom level is a scaling factor that changes the size of the view.

Themes Layout Values