Advanced User Interface Controls and Components
IntegralUI SideBar is a native web component for Angular, React and Vue that allows you to add a custom content panel that appears by sliding from page side over main content. In this article, you will find general information about the sidebar component, including its properties, events and methods that you can use.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
Using different properties from control panel, you can choose the side at which the SideBar is placed, whether animations are active or disabled, the animation speed and whether the side bar content will appear over main page content or before it.
Popup property determines whether the sidebar content appears over page content or it is placed before it. If the SideBar is placed on right or bottom side, the content will always appear over the page content.
The Header is created from a template and it is fully customizable. You can place text, command buttons or other components like a Menu to it.
To use the SideBar component you need to do the following:
<iui-sidebar>
<ng-template let-obj [iuiTemplate]="{ type: 'header' }"></ng-template>
<ng-template let-obj [iuiTemplate]="{ type: 'content' }"></ng-template>
</iui-sidebar>
SideBar component has two parts: header and content. You can customize the sidebar by adding custom HTML elements or other web components inside header and/or content template. You can arrange these elements in custom layouts specified on your side. In this example, the header has a title and the content has a multiline text with two buttons on the bottom.
public data: any;
public barSize: any = { width: 300, height: 400 }
public barTitle: string = "SideBar Header";
constructor(){
this.data = {
body: 'Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor.'
}
}
<iui-sidebar [appRef]="applicationRef" [data]="data" [size]="barSize" [title]="barTitle" #bar>
<ng-template let-obj [iuiTemplate]="{ type: 'header' }">
<div class="sidebar-ovw-header">
<span class="sidebar-ovw-header-title">{{barTitle}}</span>
</div>
</ng-template>
<ng-template let-obj [iuiTemplate]="{ type: 'content' }">
<div class="sidebar-ovw-content">
<span>{{data.body}}</span><br/>
<div class="sidebar-ovw-content-buttons">
<button (click)="btnOk()">Ok</button>
<button (click)="btnCancel()">Cancel</button>
</div>
</div>
</ng-template>
</iui-sidebar>
/* Bar Header and Content */
.sidebar-ovw-header {
padding: 0;
}
.sidebar-ovw-header-title {
display: inline-block;
margin: 3px 0 0 2px;
}
.sidebar-ovw-content {
padding: 10px;
font-family: Calibri, Tahoma, Arial, Helvetica, sans-serif;
font-size: 1.1em;
}
.sidebar-ovw-content-buttons {
position: absolute;
bottom: 10px;
right: 5px;
}
.sidebar-ovw-content-buttons button {
margin: 0 5px;
padding: 3px;
width: 75px;
}
Note If header contains only a text, then instead of using a template, you can simple provide a header text to the title property. In this case, the header template is not required.
By default, the sidebar will appear on the page left side, but you can change the placement property and set the side at which the sidebar will be placed. Depending on the chosen placement, the sidebar content will appear accordingly: left placement will show the content on right, top placement will show content below etc.
public barPlacementOptions: any = [
{ text: 'Top', value: IntegralUIPlacement.Top },
{ text: 'Right', value: IntegralUIPlacement.Right },
{ text: 'Bottom', value: IntegralUIPlacement.Bottom },
{ text: 'Left', value: IntegralUIPlacement.Left }
];
constructor(){
. . .
this.currentBarPlacement = this.barPlacementOptions[3];
}
<iui-sidebar [appRef]="applicationRef" [data]="data" [size]="barSize" [title]="barTitle" [placement]="currentBarPlacement.value" #bar>
<ng-template let-obj [iuiTemplate]="{ type: 'header' }">
<div class="sidebar-ovw-header">
<span class="sidebar-ovw-header-title">{{barTitle}}</span>
</div>
</ng-template>
<ng-template let-obj [iuiTemplate]="{ type: 'content' }">
<div class="sidebar-ovw-content">
<span>{{data.body}}</span><br/>
<div class="sidebar-ovw-content-buttons">
<button (click)="btnOk()">Ok</button>
<button (click)="btnCancel()">Cancel</button>
</div>
</div>
</ng-template>
</iui-sidebar>
If you want to have a sidebar where the content appears over other elements on your page, then you need to set the popup property to true. This will make sure the sidebar content pops over the page content.
For other sidebar functionalities, check out the property list below.
You can use the following properties to change the appearance and behavior of the SideBar component:
Using the above properties, you can customize the SideBar component in a way best suited for your application.
Here is a list of available events:
The following public methods are available:
You can use above methods to manually open or close the sidebar content, for example based on a click from a custom toolbar on your page.
In this example, the sidebar is closed whenever the Ok or Cancel button is clicked from within the custom content template:
import { IntegralUISideBar } from './integralui/components/integralui.sidebar';
. . .
@ViewChild('bar', { static: false }) bar: IntegralUISideBar;
btnOk(){
this.bar.close();
}
btnCancel(){
this.bar.close();
}
<iui-sidebar [appRef]="applicationRef" [data]="data" [size]="barSize" [title]="barTitle" [placement]="currentBarPlacement.value" #bar>
<ng-template let-obj [iuiTemplate]="{ type: 'header' }">
<div class="sidebar-ovw-header">
<span class="sidebar-ovw-header-title">{{barTitle}}</span>
</div>
</ng-template>
<ng-template let-obj [iuiTemplate]="{ type: 'content' }">
<div class="sidebar-ovw-content">
<span>{{data.body}}</span><br/>
<div class="sidebar-ovw-content-buttons">
<button (click)="btnOk()">Ok</button>
<button (click)="btnCancel()">Cancel</button>
</div>
</div>
</ng-template>
</iui-sidebar>
You can modify the SideBar appearance by changing the attributes of several built-in CSS classes. To enhance the component, you can add your own custom CSS classes that will override the default appearance.
For this purpose, you can use the controlStyle property, where you need to specify the names of your CSS classes, for the state that you want to change: disabled, focused, hovered, normal and selected:
sideBarStyle = {
general: {
disabled: 'iui-sidebar-disabled',
focused: 'iui-sidebar-focused',
normal: 'iui-sidebar',
hovered: 'iui-sidebar-hovered',
selected: 'iui-sidebar-selected'
}
}
In this example, custom CSS classes are provided for sidebar header and content within their templates.
/* Bar Header and Content */
.sidebar-ovw-header {
padding: 0;
}
.sidebar-ovw-header-title {
display: inline-block;
margin: 3px 0 0 2px;
}
.sidebar-ovw-content {
padding: 10px;
font-family: Calibri, Tahoma, Arial, Helvetica, sans-serif;
font-size: 1.1em;
}
.sidebar-ovw-content-buttons {
position: absolute;
bottom: 10px;
right: 5px;
}
.sidebar-ovw-content-buttons button {
margin: 0 5px;
padding: 3px;
width: 75px;
}
To disable animations, you can simply set the allowAnimation property to false.
IntegralUI SideBar is a web component that you can use in Angular, React and Vue. It allows you to place a custom content on page side that will appear on demand. Using different properties and methods and by providing your own CSS classes, you can customize the component appearance and behavior.
The SideBar component is part of IntegralUI Web.