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.

Rectangle Properties

The Rectangle component properties consist of LAYOUT & POSITIONING, STYLING, and DYNAMIC VISIBILITY sections.

This guide will describe all sections besides the Layout & Positioning and Dynamic Visiblity sections, as these are generic to each component. A separate guide and tutorial for each can be found by clicking the links above.

The component properties are set and edited using different methods, some have multiple methods, some just one. See this Set Property Values article for more information on using the different methods.

---

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.