Advanced User Interface Controls and Components
In this article, you will learn how to align the Breadcrumb and Toolbar components in one line, where toolbar has few buttons placed on the right side. In addition, you can resize the breadcrumb using the Frame component; this will adjust the breadcrumb current path to show only the last items.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
As above demo shows, there is a breadcrumb component with a pre-selected path. On right side, there is a toolbar with three buttons and a separator. At far end, there is a grip icon, which you can use to resize the breadcrumb horizontally.
During resize, if the space to show the current path in full is too small, only the last items from the path will appear with a menu button at beginning. You can use the menu to select other items from the current path.
On its own, the Breadcrumb component can only show the path of currently selected item from a tree hierarchy. The path consists of selected item and all its parent items. In cases where you need to add some custom action buttons, you can use the Toolbar component.
Using the toolbar component is optional. You can add your own custom buttons or use a different component. The IntegralUI Toolbar has built-in functionality that can ease this process.
At first, you will require a container div element that will contain the breadcrumb and toolbar components. The Frame component is attached to this container from where you can resize it on demand.
<div class="app-block" #application [iuiFrame]="frameSettings">
<iui-breadcrumb [appRef]="applicationRef" [items]="items">
<ng-template let-item>
<span>{{item.text}}</span>
</ng-template>
</iui-breadcrumb>
<iui-toolbar>
<iui-toolitem *ngFor="let item of toolbar" [data]="item" [type]="item.type"></iui-toolitem>
</iui-toolbar>
</div>
Frame component is optional, it is used in this example to demonstrates changes to the current path displayed by the breadcrumb on resize. In real case scenarios, when you app uses responsive layout, this will happen automatically.
Both of these components by default have their display attribute set to 'block', which means when added to the DOM they will appear vertically, breadcrumb on top followed with toolbar on bottom. In addition, their border attribute is set so they will have their own separate border. To solve this, using CSS you will need to set the display to 'inline-block', clear their background and border.
Next, you will need to calculate toolbar width so that the breadcrumb will have its width set from the parent container reduced by the toolbar width. In this calculation, you will need to include the width of the grip icon, which is used by the Frame component to resize the container on demand.
// Breadcrumb
public items: Array;
public selItem: any = null;
public breadcrumbStyle: any = {
general: {
normal: 'bcrmb-tool',
}
}
// Toolbar
public toolbar: Array;
public toolbarStyle: any = {
general: {
normal: 'tlbr-btns',
}
}
<div class="app-block" #application [iuiFrame]="frameSettings">
<iui-breadcrumb [appRef]="applicationRef" [items]="items" [controlStyle]="breadcrumbStyle">
<ng-template let-item>
<span>{{item.text}}</span>
</ng-template>
</iui-breadcrumb>
<iui-toolbar [controlStyle]="toolbarStyle">
<iui-toolitem *ngFor="let item of toolbar" [data]="item" [type]="item.type"></iui-toolitem>
</iui-toolbar>
</div>
/* Breadcrumb */
.bcrmb-tool
{
background: #fefefe;
border: 0;
cursor: pointer;
display: inline-block;
width: calc(100% - 105px);
}
/* Toolbar */
.tlbr-btns
{
background: transparent;
border: 0;
display: inline-block;
margin-right: 10px;
padding: 0;
}
In this example, the width of the toolbar and grip icon is pre-calculated to be 105px, to simplify the example. You can add a variable to the toolbar element and determine its width in code and based on it update the toolbar width by setting its size property. This is mostly required, when you have a dynamic toolbar with content that may change based on custom conditions.
The Toolbar can contain tool items from different types, like: checkbox, button, dropdown list, date picker, progress bar, slider etc. In case of this example, you will only need buttons and a separator.
More details on different types that you can use in the Toolbar are available here: Overview of the Toolbar web component.
Each tool item has a type property that you need to set to the corresponding component you want to show. In case of a toolbar with buttons divided by a separator, the structure looks like this:
import { IntegralUIToolItemType } from './integralui/components/integralui.core';
. . .
constructor(){
this.toolbar = [
{ id: 1, icon: 'tlbr-btns-tool-icons reload', type: IntegralUIToolItemType.Button },
{ id: 2, icon: 'tlbr-btns-tool-icons home', type: IntegralUIToolItemType.Button },
{ id: 3, type: IntegralUIToolItemType.Separator },
{ id: 4, icon: 'tlbr-btns-tool-icons favorite', type: IntegralUIToolItemType.Button }
];
}
Whenever a button is clicked, you can handle the itemClick event and add a specific action. In this example, the reload and favorite buttons only display a message when clicked. Only the home button has a specific action, which is to clear the breadcrumb path. When there is no path selected, the breadcrumb will only show the menu button from where you can choose a new path.
itemSelected(e: any){
this.selItem = e.item;
}
toolItemClicked(e: any){
if (e.data.id === 2)
this.selItem = null;
else
alert("Toolbar button clicked: " + e.data.id);
}
<div class="app-block" #application [iuiFrame]="frameSettings">
<iui-breadcrumb [appRef]="applicationRef" [controlStyle]="breadcrumbStyle" [items]="items" [selectedItem]="selItem" (selectionChanged)="itemSelected($event)">
<ng-template let-item>
<span>{{item.text}}</span>
</ng-template>
</iui-breadcrumb>
<iui-toolbar [controlStyle]="toolbarStyle">
<iui-toolitem *ngFor="let item of toolbar" [data]="item" [type]="item.type" (itemClick)="toolItemClicked($event)"></iui-toolitem>
</iui-toolbar>
</div>
When an item from the breadcrumb is clicked, the selectionChanged event will fire. You can use this event to open a route from code or add some specific action.
When the Frame component is attached to an element, it adds a grip icon on the right-bottom side of the element. By clicking on this icon and moving the mouse cursor, you can resize the element. The frame can resize the element both horizontally and vertically, but in case of the breadcrumb you only need to have a horizontal resize. This is all set in code like this:
import { IntegralUIVisibility } from './integralui/components/integralui.core';
. . .
// Frame
public frameSettings: any = {
resizeHeight: false,
visible: IntegralUIVisibility.Always
}
<div class="app-block" #application [iuiFrame]="frameSettings">
. . .
</div>
Whenever an element size changes, the Frame will fire two events:
You can use the sizeChanging event to determine whether the new size is correct, if not you can cancel the resize process. In this example, the breadcrumb should resize only to a point where there is enough space to show the menu button. If the new width is below that value (in this case is the toolabr width plus the menu button width, set to 130px), the resize stops.
frameSizeChanging(e: any){
if (e.width + e.dx < 130)
e.cancel = true;
}
frameSizeChanged(e: any){
this.breadcrumb.updateLayout();
}
<div class="app-block" #application [iuiFrame]="frameSettings" (sizeChanging)="frameSizeChanging($event)" (sizeChanged)="frameSizeChanged($event)">
. . .
</div>
On the other hand, you can use the sizeChanged event to update the layout of the breadcrumb. This will adjust the current path so when cannot appear in full, the breadcrumb will display only the last items from the path with a menu button in front.
In order to create a path selector with custom buttons, you can use the IntegralUI Breadcrumb and Toolbar web components, place them in a container aligned next to each other. These components come with built-in functionality that you can use to change the current path on demand and add toolbar buttons with custom actions.
In addition, to resize the container on demand, you can use the Frame component and adjust the breadcrumb size in the process.Depending on size changes or button clicks, a specific events are fired that you can handle in your code and add your own custom actions
A sample code that shows this functionality is available in vanilla Javascript, Angular, React and Vue.
The Breadcrumb component is part of IntegralUI Web.