ToolBar style attributes

ToolBar presentation style attributes apply to the TOOLBAR element.

Note: This topic lists presentation style attributes for a specific class of form element, common presentation style attributes can also be used for this type of element.

aspect

Defines the aspect of the toolbar, by specifying the visibility or the relative position of the icon and text of a toolbar item.

Values can be:
  • "iconAboveText" (default): The icons are displayed on top of the texts.
  • "icon": Only toolbar item icons are displayed. When no icon is available, displays the text.
  • "text": Only toolbar item texts is displayed.
  • "iconAndText": The icons are displayed to the left of the texts.
Note: If a continuous dropdown is displayed (the 3-dots icon) because the window is too small to show all toolbar buttons, both icon and text are displayed in the items of the drop-down list (the aspect attribute is ignored for this list).

itemsAlignment

Defines how toolbar items must be aligned for the available space.

Values can be:
  • "left" (default): Items are compacted to the left.
  • "center": Items are compacted and centered.
  • "right": Items are compacted to the right.
  • "justify": Items are equally stretched to occupy all available space.

scaleIcon

Defines the scaling behavior of the associated icon, if the source image size is bigger than the place reserved for it in the widget.

If the scaleIcon attribute is undefined, the behavior depends on the type of action view: toolbar button icons and action panel button icons are scaled down to match the size of the widget. For other widgets, by default no scaling occurs, as for scaleIcon="no".

Values can be:
  • "no": No scaling occurs and the image is taken as-is. It is up to the developer to resize the source image to avoid misalignment.
  • "yes": Images are scaled down following the height of the widget (button or edit field). Setting a big font can result in a big icon.

Independently of the scaleIcon attribute value,to avoid pixelization or blurring of images, raster images are never upscaled. However, SVG images and TTF icons can be upscaled without any penalty.

If the icon must be enlarged, the image is centered and a transparent border is added to "fill" the empty space. This allows a mix of larger and smaller icons while keeping widget alignment.

If scaling takes place, the aspect ratio of the original image is kept. A non-square source image displays as a non-square scaled icon.

size

Specifies an abstract size for the toolbar.

Values can be:
  • "small": Displays toolbar items with a small size, allowing a maximum of items to be displayed.
  • "medium" (default): Displays toolbar items with a regular size.
  • "large": Displays large toolbar items, showing only a handful of buttons.

The number of toolbar items displayed with these different size specifications depends on the size of the screen. For example, on a mobile device screen, "small" will show about seven toolbar items (buttons). This will also depend on the screen orientation.