A straightforward component to enable you to create rectangles of any size and color for backgrounds, brand
color panels and any creative use you can imagine.
Properties for Rectangle Component
|Name||When components are placed on a page they appear highlighted blue in the scene tree and can|
be renamed by double clicking in this panel and typing the new name. Components can also be
set to be visible/invisible on the page, using the ‘eye’ icon on this panel.
|Position and Size||Sets position and size. As long as measurements are maintained as percentages it deals|
automatically with dynamic layout and resizing for different devices and orientations. You
can use millimeters to control aspects of size, like width or height, in order to create a
rectangle thats size will be maintained across devices.
|Preset||A Preset is a pre-determined set of properties and files for a component. You can have a|
Predefined Preset (Umajin created) or a Custom Preset (custom designed by you). Where the
component has a Predefined Preset it will automatically be loaded into your app as the
default when you insert that component.
The ‘LOAD’ button opens the Preset Selector, which has tabs for Predefined and Custom, so
you can choose which preset to load for your component.
Create your own Preset by building your assets, putting them in your Image folder and then
selecting them in the Properties panel. The ’SAVE’ button will enable you to name and save
your preset under the Custom tab.
|Fill Color||Type in the hex number or use the color panel to select the color you want.|
|Opacity||The opacity slider sets the transparency of the rectangle. 100 is maximum opacity.|
|Corner Radius||Sets the roundness of the corners of the rectangle. Scale 0 to 300. If the rectangle has a|
stroke that creates a border, the roundness displays according to whether the stroke is set
to center, inside or outside. ‘Stroke Position’ sets the stroke’s placement in relation to
|Stroke Width||Creates a stroke that borders the rectangle. Scale 0 to 50.|
|Stroke Color||Set the color of the stroke.|
|Opacity||Sets the opacity of the stroke.Scale 0 to 100.|
|Stroke Position||Sets the position of the stroke in relation to the rectangle.The rectangle stays the same|
size and the border stroke moves inside, outside or centers on the rectangle edge.
|Stroke Left, Stroke Top, Stroke Right, Stroke Bottom||These 4 checkboxes allow you to turn any one, or all of the sides of the rectangle stroke,|
on or off.