Toolbar

Sample configuration of a Toolbar widget

The Toolbar widget allows users to further configure their custom interface by adding a bar (either horizontal or vertical) containing a series of buttons or menus that perform several operations. 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. The Toolbar can be dragged only onto slides or dialogs.

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	GOLD Ref
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 and generated color palettes, otherwise they can use the color picker or choose 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 and generated color palettes, otherwise they can use the color picker or choose 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 and generated color palettes, otherwise they can use the color picker or choose 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 and generated color palettes, otherwise they can use the color picker or choose 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 and generated color palettes, otherwise they can use the color picker or choose 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 and generated color palettes, otherwise they can use the color picker or choose 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 and generated color palettes, otherwise they can use the color picker or choose 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.

---

Buttons 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. In Rulex Studio, two types of buttons can be configured: the Event Button and the Menu Button.

The Event Button links a specific event to a button, allowing users to trigger operations by interacting with it.

To create an Event Button:

• Click the plus icon on either sides of the Toolbar widget, or

• Select Event Button from the Button type option in the button’s Layout options window.

The Menu Button allows users to create a button that displays a menu of several event buttons.

To create a Menu Button:

• Click the plus icon on either sides of the Toolbar. Then, press and hold CTRL while clicking on the newly created button to switch it to a Menu Button type, or

• Select Menu Button from the Button type option in the button’s Layout options window.

Clicking the Menu Button displays a list of any previously configured event buttons and the label Add new button. By clicking the plus icon next to this label, users can add a new event button to the menu list. To configure an event button within a Menu Button, users need to right-click the newly created event button and select the Set action option. Once the event is successfully configured, users can click the event button to trigger the specific event associated with it.

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 action: it allows users to set events linked to the button (available only for the Event Button type).

• Delete: it deletes the button as well as the event or the event steps linked to it.

Note

Note that if you delete an Event Button a pop-up message will appear informing you that an event is about to be canceled, while if the button is a Menu Button it will advise that a menu 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	GOLD Ref
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 and generated color palettes, otherwise they can use the color picker or choose 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 and generated color palettes, otherwise they can use the color picker or choose 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 and generated color palettes, otherwise they can use the color picker or choose 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.