Layout props to position things in the canvas

Hierarchy

  • UiTransformProps

Properties

alignContent?: AlignType

The align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.

alignItems?: AlignType

The align-items property controls the alignment of items on the Cross Axis.

alignSelf?: AlignType

The align-self property has the same options and effect as align items but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent

display?: DisplayType

The display property controls if a item is going to be displayed or not.

flex?: number

The flex shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.

flexBasis?: number

The flex-basis property sets the initial main size of a flex item. It sets the size of the content box.

flexDirection?: FlexDirectionType

The flex-direction property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

flexGrow?: number

The flex-grow property sets the flex grow factor of a flex item's main size.

flexShrink?: number

The flex-shrink property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.

flexWrap?: FlexWrapType

The flex-wrap property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked

height?: "auto" | PositionUnit

The height property specifies the height of an element. Using 'auto' as value makes it adapt to its content.

justifyContent?: JustifyType

Justify content describes how to align children within the main axis of their container.

margin?: PositionShorthand | Partial<Position>

The margin shorthand property sets the margin area on all four sides of an element.

maxHeight?: PositionUnit

The max-height property sets the maximum height of an element

maxWidth?: PositionUnit

The max-width property sets the maximum width of an element.

minHeight?: PositionUnit

The min-height CSS property sets the minimum height of an element.

minWidth?: PositionUnit

The min-width property sets the minimum width of an element.

overflow?: OverflowType

The overflow property controls what happens to content that is too big to fit into an area

padding?: PositionShorthand | Partial<Position>

The padding shorthand property sets the padding area on all four sides of an element at once.

pointerFilter?: PointerFilterType

The pointer filter property determines if the ui element blocks the pointer or not (elements with pointer events always block the pointer regardless of this property) *

position?: PositionShorthand | Partial<Position>

The position property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

positionType?: PositionType

The position type of an element defines how it is positioned within its parent.

width?: "auto" | PositionUnit

The width property specifies the width of an element. Using 'auto' as value makes it adapt to its content.