Rectangle
This article describes the Rectangle component and its properties.
Squirrel 1.12 introduced a “Quick Set-up” tab on many property panels. The properties described on this page are available on the “All Properties” tab of the property panel. For more details on “Quick Set-Up” properties see this article
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 color that matches the value entered in the property field. This can be set in 3 ways:
Clicking the colored rectangle next to the Fill checkbox and using the color picker
Typing in a color value
Binding to a color value in a spreadsheet cell
Opacity – This determines the transparency of the Rectangle. This is only available when the Fill checkbox is checked.
Corners – This property determines the corner radius of the Rectangle component border. Use the slider to amend this property, or type a numerical value into the property field.
Individual Corners - selected this property to apply different radii to each of the component's corners. Each of these individual inputs can be manually edited or bound to the spreadsheet.
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 color 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 rectangle will respond to mouse events.
Last updated