Home
» Help
» IntegralUI
» Web Components
» Toolbar
Overview of IntegralUI Toolbar
IntegralUI Toolbar is a native web component for Angular, React and Vue that displays a collection of different editor types in one line. It allows you to arrange multiple editors horizontally. In this article, you will find general information about the toolbar component, including its properties, events and methods that you can use.
In this example, the toolbar shows different kind of items like: buttons, checkbox, progress bar, dropdown list, slider, numeric component and separators. All these components act like editors and are aligned in one horizontal line.
How to Use IntegralUI Toolbar in Angular, React and Vue
To use the Toolbar component you need to do the following:
In app template place the button component using the iui-toolbar tag name
Set values for different properties available
Add the iui-toolitem tag name as a child to create a specific tool item
Use the ngFor directive to cycle through each item
enabledChanged - occurs when component is enabled or disabled
itemClick - occurs when item is clicked
sizeChanged - occurs when component size changes
stateChanged - occurs when component state changed: disabled, normal, hovered, selected
valueChanging - occurs before the value property changes
valueChanged - occurs after the value property is changed
If the tool item is an editor, then the valueChanged event is fired, whenever editor value changes. You can handle this event in your code and add specific action based on event data. For example, for a dropdown list when a new option is selected, the event data contains the selected item:
The e.data field contains the tool item data (in this case the dropdown list)), you can use it to determine the item type. The e.value field contains the value of the new selected item.
Supported Methods
The following public methods are available for each toolbar item:
updateLayout - updates the component layout
How to Customize the Toolbar Appearance
Toolbar on its own is empty. You can customize the toolbar by adding either items from built-in component types or provide your own custom items.
In addition, you can change the general toolbar appearance using the controlStyle property. You can override the default CSS style settings by providing your own CSS classes:
IntegralUI Toolbar is a web component that you can use in Angular, React and Vue. You can use the component to display a collection of different editor types in one line. Using different properties and events and by providing your own CSS classes, you can customize the toolbar appearance and behavior.