Line

This article describes the line 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 Line is a graphical component that can be styled to suit a Squirrel project theme.

Line Properties

The Line component properties consist of sizing and positioning properties as well as 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.

Position, Length, and Angle

Once a line has been added to the canvas, you can set the position, length, and angle properties in 3 ways:

  • Type in a value

  • Bind to a value in a spreadsheet cell

  • Click and drag to move the line or grab either handle to change size/angle:

Pressing the shift key (⇧ Mac) while making manual adjustments to the line will constrain movement to a horizontal or vertical plane (depending on the mouse direction when the shift key is pressed) and also constrain the size adjustment direction and angle to the nearest 45°.


STYLING

  • Line color – The line will be drawn in the color that matches the value entered in the property field. This can be set in 3 ways:

    • Clicking the colored rectangle 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 line. This property can be set in 3 different ways:

    • Using the spinner buttons

    • Typing in a value

    • Binding to value in a spreadsheet cell

  • Start cap – Use this property to change the style of the start cap of the line. A line on the canvas is drawn from the left to the right. In this default position, changing the style of the start cap will cause the left end of the line to change the style (this may vary if the angle of the line is adjusted sufficiently). The options are blunt, rounded, and arrow solid:

  • End cap – Use this property to change the style of the end cap of the line. A line on the canvas is drawn from the left to the right. In this default position, changing the style of the end cap will cause the right end of the line to change the style (this may vary if the angle of the line is adjusted sufficiently). The options are blunt, rounded, and arrow solid:

Last updated

Was this helpful?