Toolbar Settings

View video

This article describes the menu application toolbar and provides information on how to add new items and how to configure them.

Toolbar buttons

Resources for creating menu items Below are the options for adding items to the toolbar. Added items are displayed in the list of items.

Table with the description of each of the options for creating and ordering the toolbar items.

Title	Icon	Description
Insert item		Add a new item to the menu toolbar.
Insert subitem		Add a sub-item to the menu toolbar. For this, some item must be previously selected. Otherwise an item will be added.
Add Separator		Adds an item separator to the toolbar.
Remove		Remove the selected item from the toolbar
Move up		The move up button changes the order of the selected item, moving it up.
Move down		The move down button changes the order of the selected item, moving it down.
Move left		The move left button changes the position of an item, moving it to the left. In this way, an item added as a sub-item can be turned into an item.
Move right		The move left button changes the position of an item, moving it to the right. In this way, an item can be turned into a sub-item. This button is only active if the selected item is positioned below another item In the toolbar it is only possible to create one level of items.

Button Properties

Properties are available by selecting one of the previously added toolbar buttons.

Dropdown

Defines the display format of subitems

Dropdown - The subitems displayed in the list.

Side by side - Subitems will be displayed side by side in the toolbar.

Type

Defines the type of button that will be displayed.

The available options are:

Image

When selecting this option only the image will be displayed, without any CSS application to the button.

Below is an example of a button configured as an image

Button

Below is an example of a standard button

Link

In this option, only the button’s label will be displayed in the form of a link, without any application of css to the button.

Below is an example of a button configured as a link

Link

Allows selecting the application through his name or by a link.

Label

Defines the title that will be shown on the button when the application is run.

In addition to a fixed text, the Label attribute allows the use of langs to define the button’s title, making it possible to use your application in a multi-language project.

Using a fixed text

Using a lang

Click here for more details on Application Language

Hint

Displays a message in the hover of the button.

For the feature to work, just add a text or language in the Hint attribute, as in the example below.

Using a fixed text

Using a lang

Click here for more details on Application Language

See below the behavior of each of them:

Display

Defines the way the button will be displayed on the toolbar. The options are Only text, Only image, Text and image, Only Font Awesome icon and Text and icon Font Awesome

See below the behavior of each of them:

Only text

Displays only the text entered in the Label attribute.

Only image

Displays only the image informed in the Icon attribute.

Text and image

Displays the text and image informed in the attributes Label and Icon, respectively.

Only Font Awesome icon

Display Font Awesome icon informed in the attribute Icon.

Text and icon Font Awesome

Displays Font Awesome texts and icons, informed in the attributes Label and Icon, respectively.

Icon

Defines the icon or image that is shown on the button.

This attribute works in two ways, to select a image or Font Awesome icon, it will depend on the option selected in the Display attribute.

When selected Only image or Text and image

If on the attribute Display was selected, Only image or Text and image, you need select a image.

See how add a image

When selected Only Font Awesome Icon or Text and icon Font Awesome

If on the attribute Display was selected, Only Font Awesome Icon or Text and icon Font Awesome, you need select a Font Awesome Icon for the icon attribute.

See how add a Font Awesome Icon

![how add a Font Awesome Icon][gif_selecting_a_font_awesome_icon_attribute]

.png [gif_selecting_a_font_awesome_icon_attribute]: ../../../../assets/images/docs/app/menu/toolbar/selecting_a_font_awesome_icon_attribute.gif .png

Icon Position

Defines the position of the Text or Image (Text to the right, Image to the right).

Target

Allows defining how to display the applications: In the same window or in a new one.

Icon Color

Defines the Font Awesome icon color. If no value is informed, the icon will receive the default color of the button theme.

The icon Color option is available whenever any Font Awesome option to set in the Display attribute.

You can set the icon color in the following ways.

Informing a HEX code

Selecting a color

When selecting a color, the HEX value will be inserted into the field automatically.

Informing the color name

When informing the color name, the HEX value will be inserted in the field automatically.

Informing a RGB code

Informing a HSL code

.png gif_informing_name: ../../../../assets/images/docs/app/menu/toolbar/informing_name.gif

Hover Icon Color

Defines the Font Awesome icon color when hover in the button. If no value is informed, the icon will receive the default color of the button theme.

The Hover Icon Color option is available whenever any Font Awesome option to set in the Display attribute.

You can set the icon color in the following ways.

Informing a HEX code

Selecting a color

When selecting a color, the HEX value will be inserted into the field automatically.

Informing the color name

When informing the color name, the HEX value will be inserted in the field automatically.

Informing a RGB code

Informing a HSL code

.png gif_informing_name: ../../../../assets/images/docs/app/menu/toolbar/informing_name.gif

Disabled Icon Color

Defines the Font Awesome icon color when the button is disabled. If no value is informed, the icon will receive the default color of the button theme.

The Disabled Icon Color option is available whenever any Font Awesome option to set in the Display attribute.

You can set the icon color in the following ways.

Informing a HEX code

Selecting a color

When selecting a color, the HEX value will be inserted into the field automatically.

Informing the color name

When informing the color name, the HEX value will be inserted in the field automatically.

Informing a RGB code

Informing a HSL code

CSS Style

Define the style of the buttons