squirrel_logo
Sign up for free
squirrel_logo

Rectangle

 

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

 

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:

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 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.

 

 

in Components
Was this article useful?

Related Articles