Controls¶

Controls are a type of widget in Rulex Studio, found in the Widgets panel of the stage.

To harness the full potential of these widgets, Controls need to be associated with events.

Note

The event triggers available for these widgets are:

onClick
onMouseEnter
onMouseLeave.

There are two types of Controls widgets:

General button
Toolbar

Each type of widget has its own set of configuration options. In the following subsections, users will find detailed information about how to configure Controls widgets.

Note

A dedicated section on this page also explains how to configure toolbar buttons linked to events. This is crucial for fully leveraging the capabilities of the Toolbar widget.

The General Button¶

https://cdn.rulex.ai/docs/Studio/general-button-widget.webp

Sample configuration of a General button filtering the Federal-government workclass attribute

The General button widget has the graphical aspect of a button. To use this widget correctly, it must be linked to an event.

The table below provides a detailed description of the General button layout options along with their corresponding GOLD references. These options can also be modified using parametric mode.

Subsection	Option	Description
Button	Button variant	This drop-down list defines the button’s graphical style. Available options include: Contained, Outlined, Text.
	Disable button	By selecting this checkbox, the button will be immediately disabled, causing it to appear greyed out and preventing any user interaction.
	Disable hover effect	By selecting this checkbox, the button’s hover effect will be disabled.
Title	Text style	Here, users can define the title style, which can be bold, italic or underlined.
	Title text	In this text field, users can define the text appearing onto the General button widget.
	Font family	It defines the text font of the General button. Users can select the desired one in the drop-down menu.
	Text transform	From this drop-down list, the text appearing on the widget can be customized. Available options include: None, Capitalize, Uppercase, Lowercase.
	Font size (px)	In this spin-box, users can choose the desired font size in pixels of their button’s text.
	Title color	This option defines the button’s title color. By clicking it, users can select Standard colors, otherwise they can use the color picker or insert the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is dark blue.
	Title color hover	This option defines the title text color that will appear when hovering over the General button. By clicking it, users can select Standard colors, otherwise they can use the color picker or insert the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is light blue.
Icon	Change icon	It adds an icon to the button. By clicking on it, users can select the desired one in the corresponding Select icons window. In this window, they can also define the Color as well as the Color hover of the selected icon (available for standard icons only). Additionally, a Custom option lets users upload their own icons in PNG or SVG format.
	Icon position	From this drop-down list, users can choose where to position the icon in relation to the button’s text. Available options are: Right and Left.
	Icon width (px)	From this spin-box, users can customize their icon’s width in pixels.
	Icon height (px)	From this spin-box, users can customize their icon’s height in pixels.
Color	Color	This option defines the color of the General button. By clicking it, users can select Standard colors, otherwise they can use the color picker or insert the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is light blue.
	Color hover	This option defines the button’s color when users hover over it. By clicking it, users can select Standard colors, otherwise they can use the color picker or insert the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is dark blue.
Border	Border radius (px)	This spin-box allows users to set the button’s corner radius by specifying a value in pixels. The higher the number, the more rounded the button’s corners will appear.
	Border size (px)	It controls the thickness of a button’s border by specifying a value in pixels. The higher the number, the thicker the border will appear. This option is only applicable when the Button variant option is set to Outlined.
Label	Text style and alignment	Here, users can define the label style, which can be bold, italic or underlined, as well as the label horizontal alignment, which can be right, center, left.
	Label placement	From this drop-down list, the placement of the button’s text label can be chosen. Available options include: Top, End, Bottom, Start.
	Label text	In this text field, users can enter the label appearing on the outside of the General button.
	Font family	It defines the font of the button’s text label. Users can select the desired one in the drop-down menu.
	Text transform	From this drop-down list, users can further customize the button’s text label. Available options include: None, Capitalize, Uppercase, Lowercase.
	Font size (px)	In this spin box, users can choose the desired font size in pixels of their button’s text label.
	Label color	It defines the color of the button’s text label. By clicking it, users can select Standard colors, otherwise they can use the color picker or insert the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is dark blue.

Tip

It is also possible to define the size of the button label by clicking the three dotted icon in the top-left corner of the General button. The available options are: S (Small), M (Medium) or L (Large).

The Toolbar¶

https://cdn.rulex.ai/docs/Studio/toolbar.webp

Sample configuration of a Toolbar widget

This type of Controls widget allows users to drag and drop the toolbar graphic element onto a specific slide. Interactive buttons linked to events can be easily added to the Toolbar widget by clicking the plus icons, positioned on both the left and right sides of the central text title.

Note

The plus icons will disappear in presentation mode. They can also be hidden in editing mode by clicking the eye icon located in the top-left corner of the Toolbar.

The table below provides a detailed description of the Toolbar layout options along with their corresponding GOLD references. These options can also be modified using parametric mode.

Subsection	Option	Description
General	Orientation	From this drop-down list, the orientation of the toolbar can be defined. Available orientation modes are: Horizontal and Vertical.
	Elevation	From this spin box, users can specify the elevation level of the toolbar. Increasing the elevation gives the impression of the toolbar being more lifted and adds depth to the widget.
	Disable hover effect	By selecting this checkbox, the Toolbar’s hover effect will be disabled.
Background	Background color	It defines the background color of the Toolbar. By clicking it, users can select Standard colors, otherwise they can use the color picker or insert the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is blue.
	Background color hover	It defines the background color hover of the Toolbar. By clicking it, users can select Standard colors, otherwise they can use the color picker or insert the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is blue.
Border	Border radius	This spin-box allows users to set the Toolbar’s corner radius by specifying a value in pixels. The higher the number, the more rounded the button’s corners will appear.
Icons style	Text style	Here, users can define the label style, which can be bold, italic or underlined.
	Font family	It defines the font of the Toolbar’s text label appearing near its button events icons. Users can select the desired one in the drop-down menu.
	Font size (px)	In this spin box, users can choose the desired font size in pixels of their text label.
	Text Transform	From this drop-down list, users can further customize the Toolbar’s text label. Available options include: None, Capitalize, Uppercase, Lowercase.
	Label color	It defines the color of the button’s text label. By clicking it, users can select Standard colors, otherwise they can use the color picker or insert the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is white.
	Icon color	It defines the color of the button icons of the Toolbar. By clicking it, users can select Standard colors, otherwise they can use the color picker or insert the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is white.
Title	Text style	Here, users can define the title style, which can be bold, italic or underlined.
	Title text	In this text field, users can enter the text appearing onto the Toolbar widget.
	Font family	It defines the font of the text appearing on the Toolbar. Users can select the desired one in the drop-down menu.
	Text transform	From this drop-down list, users can further customize the button’s text label. Available options include: None, Capitalize, Uppercase, Lowercase.
	Font size (px)	In this spin box, users can choose the desired font size in pixels of their Toolbar’s text.
	Title color	This option defines the desired text’s title color. By clicking it, users can select Standard colors, otherwise they can use the color picker or insert the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is white.
Menu icons style	Text style	Here, users can define the text style of the button menu type, which can be bold, italic or underlined.
	Font family	It defines the font of the text appearing on the button menu type. Users can select the desired one in the drop-down menu.
	Font size (px)	In this spin box, users can choose the desired font size in pixels of the text appearing in the button menu.
	Text transform	From this drop-down list, users can further customize the text appearing in the button menu. Available options include: None, Capitalize, Uppercase, Lowercase.
	Label color	It defines the color of the label’s option appearing within the Toolbar’s button menu. By clicking it, users can select Standard colors, otherwise they can use the color picker or insert the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is black.
	Icon color	It controls the color of the button icons appearing within the Toolbar’s button menu. By clicking it, users can select Standard colors, otherwise they can use the color picker or insert the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is gray.

Note

Keep in mind that Icons style options primarily affect the label next to the Toolbar’s button icons. To see these style changes, make sure the Show label checkbox is selected in the button layout window.

Button events in a toolbar

As previously mentioned, you can add buttons to the Toolbar widget and configure events associated with them through the corresponding Studio Events window.

Right-clicking on a button within a Toolbar opens a dedicated context menu with the following options:

Open button layout: it changes the layout of the specific button.
Set actions: it allows users to set events linked to the button.
Delete: it deletes the button as well as the event or the event steps linked to it.

Note

Note that if you delete a button associated with an event a pop-up message will appear informing you that an event is about to be canceled. When you set an event on a button its default trigger type is onClick.

The table below provides a detailed description of the Toolbar’s buttons layout options along with their corresponding GOLD references. These options can also be modified using parametric mode.

Subsection	Option	Description
Button	Button type	From this drop-down list, users can choose the button configuration, such as displaying it as a simple Event Button or as a Menu Button, which opens a context menu where additional event buttons can be added.
	Menu direction	This option only appears when the Button type option is set to Menu Button. It defines the orientation of the context menu. Available orientation modes are: Right and Left.
	Button background hover	It defines the color that appears around the button area when hovering over it. By clicking it, users can select Standard colors, otherwise they can use the color picker or insert the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is white.
Divider	Divider position	Buttons within a Toolbar can be graphically separated using dividers. From this drop-down list, users can define the following orientation modes: None, Right, Left.
	Divider color	It defines the color of the divider if there is a divider separating your buttons icons within the Toolbar. By clicking it, users can select Standard colors, otherwise they can use the color picker or insert the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is white.
Tooltip	Show tooltip	If selected, it displays the tooltip of the respective button event.
	Tooltip position	From this drop-down list, users can choose how they want their button’s tooltip to be displayed. Available options are: Top, Bottom, Right, Left.
	Tooltip text	In this text field, users can enter the text that will appear as a tooltip when hovering over the button.
Label	Text style	Here, users can define the label style, which can be bold, italic or underlined.
	Show label	If selected, it displays the label of the respective button event.
	Label text	In this text field, users can enter the text appearing near the Toolbar’s button.
	Font family	It defines the font of the Toolbar’s text label. Users can select the desired one in the drop-down menu.
	Font size (px)	In this spin box, users can choose the desired font size in pixels of their text label.
	Text transform	From this drop-down list, users can further customize the Toolbar’s text label. Available options include: None, Capitalize, Uppercase, Lowercase.
	Label position	From this drop-down list, users can choose how the label text is displayed in relation to the button event. Available orientation modes are: Right and Left.
	Label color	It defines the color of the text label appearing within the Toolbar’s button menu. By clicking it, users can select Standard colors, otherwise they can use the color picker or insert the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is white.
Icon	Change icon	It modifies the default icon button. By clicking on it, users can select the desired one in the corresponding Select icons window. In this window, they can also define the Color as well as the Color hover of the selected icon (available for standard icons only). Additionally, a Custom option lets users upload their own icons in PNG or SVG format.