Rectangle
This article describes the rectangle component and its properties.
The rectangle is a graphical component that can be styled to suit a Squirrel project theme.
Select rectangle from the shapes category of the component library. Move the mouse cursor over the canvas and click to add the shape to your project:
Rectangle Properties
The properties consist of a STYLING drawer, and a DYNAMIC VISIBILITY drawer. This guide will describe the styling properties only; the dynamic visibility properties are generic to each visible component and a separate guide and tutorial on dynamic visibility can be found here.
STYLING:
-
Fill – When checked, the rectangle will be filled with a colour that matches the value entered in the property field. This can be set in 3 ways:
-
Clicking the coloured rectangle next to the Fill checkbox and using the colour picker
-
Typing in a colour value
-
Binding to a colour value in a spreadsheet cell
-
-
Opacity – This determines the transparency of the rectangle. This is only available when the Fill checkbox is checke
-
Border – This property is checked by default. Uncheck to remove the border from an rectangle. Set the colour and opacity properties as above.
-
Weight – This property determines the line thickness of the rectangle border in pixels.
-
Line style – Select an option from the dropdown box. The options are solid and dashed:
-
Corners – This property determines the corner radius of the rectangle. Use the slider to amend this property, or type a numerical value into the property field.
-
Effects – Select an option from the dropdown box. The options are none and Drop Shadow. With Drop Shadow selected the following properties appear:
-
Color – this determines the colour of the shadow
-
Opacity – this determines the opacity of the shadow
-
X-Offset – determines the horizontal position of the shadow (positive values move to the right, negative values move to the left)
-
Y-Offset – determines the vertical position of the shadow (positive values move down, negative values move up)
-
Blur – determines the blur of the shadow
-
-
Block mouse events – Checking this option will stop mouse interactions with components positioned on layers beneath the rectangle, e.g. a slider component sitting on a layer beneath the rectangle would not function. A partially covered component may still have some functionality. This option is unchecked by default which means that components positioned beneath the shape will respond to mouse events.