Feedback

Toolbar Settings

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.

Menu settings interface.

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

Title Icon Description
Insert item Insert item Add a new item to the menu toolbar.
Insert subitem Insert sub item Add a sub-item to the menu toolbar. For this, some item must be previously selected. Otherwise an item will be added.
Add Separator Insert separator Adds an item separator to the toolbar.
Remove Remove item Remove the selected item from the toolbar
Move up Move up The move up button changes the order of the selected item, moving it up.
Move down Move down The move down button changes the order of the selected item, moving it down.
Move left 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 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.

Menu settings interface.

Defines the display format of subitems

Dropdown - The subitems displayed in the list.

Subitens dropdown

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

Subitens side by side

Type

Button types options

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 image type

Button

Below is an example of a standard button

Button button type

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

Button link type

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

Hint attribute settings

Using a lang

Hint attribute settings

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

Hint attribute settings

Using a lang

Hint attribute settings

Click here for more details on Application Language

See below the behavior of each of them:

Hint text being displayed in the focus of the toolbar button.

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

Show only text on button

See below the behavior of each of them:

Only text

Displays only the text entered in the Label attribute.

Show only text on button

Only image

Displays only the image informed in the Icon attribute.

Show Only image on button

Text and image

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

Show Text and image on button

Only Font Awesome icon

Display Font Awesome icon informed in the attribute Icon.

Show Only Font Awesome icon on button

Text and icon Font Awesome

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

Show Text and icon Font Awesome on button

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

How add a image bellow

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 .png [gif_selecting_a_font_awesome_icon_attribute]: ../../../../assets/images/docs/app/menu/toolbar/selecting_a_font_awesome_icon_attribute.gif .png .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

Selecionado a cor

Selecting a color

Selecionado a cor

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

Informing the color name

![Selecionado a cor][gif_informing_name]

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

Informing a RGB code

Selecionado a cor

Informing a HSL code

Selecionado a cor

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

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

Selecionado a cor

Selecting a color

Selecionado a cor

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

Informing the color name

![Selecionado a cor][gif_informing_name]

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

Informing a RGB code

Selecionado a cor

Informing a HSL code

Selecionado a cor

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

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

Selecionado a cor

Selecting a color

Selecionado a cor

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

Informing the color name

![Selecionado a cor][gif_informing_name]

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

Informing a RGB code

Selecionado a cor

Informing a HSL code

Selecionado a cor

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

CSS Style

Define the style of the buttons