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
• Handle the component events in your code

• JavaScript
• Angular
• React
• Vue

@ViewChild('application', {read: ViewContainerRef, static: false}) applicationRef: ViewContainerRef;

public toolbar: Array;

constructor(){
    this.toolbar = [
        { id: 1, icon: 'tlbr-ovw-tool-icons save', type: IntegralUIToolItemType.Button },
        { id: 2, type: IntegralUIToolItemType.Progress, value: 25, width: 100 },
        { id: 3, type: IntegralUIToolItemType.Separator },

        // . . . 
        // 
        // The full data set is available at https://stackblitz.com/edit/integralui-toolbar-overview
        //
        
    ];
}
                                    

<iui-toolbar [appRef]="applicationRef">
    <iui-toolitem *ngFor="let item of toolbar" [data]="item" [type]="item.type" [settings]="item.settings"> 
    </iui-toolitem>
</iui-toolbar>
                                    

The item type property determines its functionality and appearance. There are several built-in types:

• Button - represents a button
• CheckBox - represents a check box
• DatePicker - allows the user to select a date by using a dropdown calendar
• DropList - allows you to select an option from a dropdown list
• Image - displays an icon or small image
• Label - displays a non-editable text
• ListScroller - displays a scrollable item list
• Numeric - displays a numeric input box
• Progress - visualize the progression of an operation
• Rating - visualizes ratings
• Separator - displays a vertical line that separates items
• Slider - allows changes to a numeric value within a range of defined minimum and maximum values
• TextBox - displays a text input box

Here is an example of some of these types set in code:

• JavaScript
• Angular
• React
• Vue

import { IntegralUICheckState, IntegralUIToolItemType } from './integralui/components/integralui.core';

// . . . 

this.toolbar = [

    // . . . 

    { 
        id: 4, 
        type: IntegralUIToolItemType.CheckBox, 
        settings: {
            threeState: true,
            style: {
                button: { 
                    checked: 'tlbr-ovw-tool-checked',
                    indeterminate: 'tlbr-ovw-tool-indeterminate',
                    unchecked: 'tlbr-ovw-tool-unchecked'
                }
            }
        },
        value: IntegralUICheckState.Checked
    },
    { 
        id: 5, 
        type: IntegralUIToolItemType.DropList,
        settings: {
            placeHolder: 'Print what ...',
            items: [
                { text: "Document ", value: 0 },
                { text: "Document properties ", value: 1 },
                { text: "Document showing markup ", value: 2 },
                { text: "List of markup ", value: 3 },
                { text: "Styles", value: 4 },
                { text: "Building block entries", value: 5 },
                { text: "Key assignments", value: 6 }
            ]
        },
        width: 225
    },

    // . . . 

];
                                    

If the item type is not specified, you can add any custom component or HTML elements as children of the iui-toolitem tag.

Toolbar Settings

Supported Properties

You can use the following properties to change the appearance and behavior of the Toolbar component:

• allowAnimation - determines whether changes to the toolbar are animated or not
• appRef - holds a reference to application view
• controlStyle - specifies an object that contains all style settings for the component
• data - specifies an object that holds data related to the component
• dataFields - specifies an object that map the fields names of list items from your data source to the ones used by the component
• enabled - determines whether the component is enabled or disabled
• items - gets or sets a collection of tool items that are assigned to the component
• name - uniquely identifies the component
• size - specifies the component width and height
• state - Specifies the component state: disabled, hovered, etc.

Using the above properties, you can customize the Toolbar component in a way best suited for your application.

Supported Methods

The following public methods are available:

• refresh - updates the component appearance
• updateLayout - updates the component layout

ToolItem Settings

Each tool item that is part of the toolbar also has its own properties:

• allowAnimation - determines whether changes to the toolbar are animated or not
• controlStyle - specifies an object that contains all style settings for the component
• data - specifies an object that holds data related to the component
• enabled - determines whether the component is enabled or disabled
• name - uniquely identifies the component
• settings - depending on type this can be a object with different fields specific to component in use
• size - specifies the component width and height
• state - Specifies the component state: disabled, hovered, etc.
• type - specifies the component type used as a tool item

Most of these properties are the same, because toolbar and toolitem inherit from the same IntegralUIBaseComponent class.

The settings property varies depending on the item type. For example, here is how it looks like for DropList and Numeric tool item:

To find more information about settings for each component type, check out the specific component overview article.

Supported Events

Here is a list of available events:

• 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:

• JavaScript
• Angular
• React
• Vue

itemValueWillChange(e: any){
    //console.log(e.data.value, " value will change: " + e.value);
}

itemValueChanged(e: any){
    //console.log(e.data, " value has changed: " + e.value);
}
                                    

<iui-toolbar [appRef]="applicationRef">
    <iui-toolitem *ngFor="let item of toolbar" [data]="item"
        [type]="item.type"
        [settings]="item.settings"
        (valueChanging)="itemValueWillChange($event)"
        (valueChanged)="itemValueChanged($event)"
    ></iui-toolitem>
</iui-toolbar>
                                    

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:

toolbarStyle = {
    general: {
        disabled: 'iui-toolbar-disabled',
        focused: 'iui-toolbar-focused',
        normal: 'iui-toolbar',
        hovered: 'iui-toolbar-hovered',
        selected: 'iui-toolbar-selected'
    }
}
                    

Conclusion

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.

The Toolbar component is part of IntegralUI Web.