Shapes¶

Shapes are geometric elements that graphically enrich a view, helping users create structured and visually coherent designs. These widgets can be found in the Widgets panel.

Widgets in the Shapes category can also be used in reports. For more information on creating reports in Rulex Studio, click here.

Rulex Studio provides a wide range of Shapes enabling users to choose the one that best suits their needs.

Note

The event triggers available for Shapes widgets are:

onClick
onMouseEnter
onMouseLeave

Shapes layout customization¶

In Rulex Studio the different Shapes types are divided into Shapes families. It is possible to browse through all the available Shapes families by opening the drop-down menu in the right panel. After selecting the desired shape, users can drag it onto the stage and customize it.

Like all widgets, by right-clicking on the shape’s border, users can perform several operations through the Widget context menu. These operations are common across all widgets except for the Open widget layout option, which is specific to each widget type.

In the table below, users can find all the available options of the Layout options window and their corresponding GOLD references. These settings can also be modified using parametric mode.

Subsection	Option	Description	GOLD Ref
Fill	Fill color	It defines the color of the shape. By clicking it, users can select Standard colors, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is light blue.	layout `["fill"]` str
	Brush type	It defines the brush effect on the shape. The possible values are: Transparent, Solid, Dense, Horizontal, Vertical, Cross, B diagonal, F diagonal, Cross diagonal, Linear gradient and Radial gradient.	layout `["brush"]` str
	Opacity (%)	It defines the percentage of opacity of the shape.	layout `["opacity"]` number
Stroke	Stroke color	It defines the color of the shape’s frame. By clicking it, users can select Standard colors, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is black.	layout `["stroke"]` str
	Stroke size (px)	It defines the thickness of the shape’s frame in pixels.	layout `["strokeWidth"]` number
	Stroke type	It defines the effect of the frame line. The possible values are: Solid line, Dash line, Dot line, Dash dot line, Dash dot dot line.	layout `["dashType"]` str
Text	Text style and alignment	Users can insert a text within the shape if desired. These font formatting options define some text features, such as the text style: bold, italic or underlined; the text horizontal alignment: left, center or right; the text vertical alignment: center, top, bottom.	layout `["fontWeight"]` normal/bold `["fontStyle"]` normal/italic `["textDecoration"]` normal/underlined `["textAlign"]` left/center/right `["Valignment"]` top/center/bottom str
	Text	Here users can insert the text that will be displayed within the shape.	layout `["text"]` str
	Font family	By clicking it, a drop-down menu will show all the available fonts.	layout `["fontFamily"]` str
	Font size (px)	It defines the font size of the text in pixels.	layout `["fontSize"]` number
	Text transform	It defines how the text is transformed. It can be: Capitalize, Uppercase, Lowercase.	layout `["textTransform"]` str
	Text color	It defines the color of the text. By clicking it, users can select Standard colors, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is blue.	layout `["color"]` str
Shape	Shape type	It allows users to change the Shape type, by selecting it from the drop-down menu.	options `["type"]` str

In the following table, by clicking each Shapes family tab, users can discover all the available Shapes types and their corresponding icons.

Arrows

Shape type	Shape icon
Four arrows
Arrow
Chevron
Double arrow
Slim left right arrow
Left right arrow
IBeam arrow
Pointer
Rounded pointer
Slim arrow
Split arrow

Ellipses

Shape type	Shape icon
Circle
Ellipse
Half ellipse

Lines

Shape type	Shape icon
Circle line
Curve
Diagonal line
Line

Speeches

Shape type	Shape icon
Cloud
Speech bubble
Rectangle speech

Solids

Shape type	Shape icon
Cone
Cube
Cylinder
Long cylinder
Prism
Pyramid

Polygons

Shape type	Shape icon
Decagon
Rhombus
Dodecagon
Heptagon
Hexagon
Nonagon
Octagon
Parallelogram
Pentagon
Trapezoid
Triangle
Right triangle