Line
This article describes the line component and its properties.
The line is a graphical component that can be styled to suit a Squirrel project theme.
Select line from the shapes category of the component library. Move the mouse cursor over the canvas and click to add a line to your project.
Line Properties
The line properties consist of sizing and positioning properties as well as STYLING and DYNAMIC VISIBILITY drawers. This guide will describe the sizing and positioning properties as well as the styling properties; the dynamic visibility properties are generic to each visible component and a separate guide and tutorial on dynamic visibility can be found here.
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:
STYLING:
-
Line color – The line will be drawn in the colour that matches the value entered in the property field. This can be set in 3 ways:
-
Clicking the coloured rectangle 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 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
-
-
Weight – This property determines the line thickness in pixels.
-
Line style – Select an option from the dropdown box. The options are solid and dashed:
- 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 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 style (this may vary if the angle of the line is adjusted sufficiently). The options are blunt, rounded and arrow solid: