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:

Select Rectangle from Shapes category in Component Library

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.