Advanced User Interface Controls and Components
Created: 18 Nov 2019
IntegralUI Button is a native Angular component that represents a button. It is fully customizable with all basic functionalities of a standard button. In this article, you will find general information about the button 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
The button component can work as a normal button or in a group with other buttons like the ones presented in this example. There are three buttons aligned next to each other forming a button group. When button is hovered its state is animated appearing above other buttons. When clicked, the button appears in different colors stating that it is pressed.
To use the Button component you need to do the following:
<div class="app-block" #application>
<div class="btn-ovw-container">
<iui-button [allowAnimation]="true" [controlStyle]="ctrlStyle2" [pressed]="isButtonPressed[0]" (click)="onButtonClicked(0)">Button 1</iui-button>
<iui-button [allowAnimation]="true" [controlStyle]="ctrlStyle" [pressed]="isButtonPressed[1]" (click)="onButtonClicked(1)">Button 2</iui-button>
<iui-button [allowAnimation]="true" [controlStyle]="ctrlStyle3" [pressed]="isButtonPressed[2]" (click)="onButtonClicked(2)">Button 3</iui-button>
</div>
</div>
By default, button component is not pressed and behave like the standard button element. However, using the pressed property you can have a button that will appear in pressed or normal state when clicked. As demo shows, this is useful with multiple buttons aligned next to each other, when you need to visually present an option that is active. For example, stating the current text alignment in use, like in Microsoft Word.
Button component is also usable as part of other components. For example, you can add a button to the cells in the Grid or TreeGrid component. Simply, place the button in the cell template, and when grid updates it will show the button inside the specified cell.
<iui-grid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" [showFooter]="false" [rowHeight]="25" #grid>
<ng-template let-column [iuiTemplate]="{ type: 'header' }">
<span *ngIf="column.id==9" class="cell-checkbox" [ngStyle]="{ 'background-image': getCheckValue(column) }" (mousedown)="columnCheckClicked(column)"></span>
{{column.headerText}}
</ng-template>
<ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
<div [ngSwitch]="cell.cid">
<div *ngSwitchCase="7" class="button-cell">
<iui-button (mousedown)="deleteRow(cell.rid)">Delete</iui-button>
</div>
<div *ngSwitchDefault>
<span class="grid-ctpl-item-label">{{cell.text}}</span>
</div>
</div>
</ng-template>
</iui-grid>
You can also use the button component in Angular Forms.
You can use the following properties to change the appearance and behavior of the Button component:
Using the above properties, you can customize the Button component in a way best suited for your application.
Here is a list of available events:
The pressedChanged event is fired, whenever the value of pressed property changes. For example, by handling the click event, you can toggle the pressed state from active or inactive (true or false). When button is pressed, it will appear in different colors representing that it is selected.
This is useful when you have multiple buttons, and you want to show which buttons are pressed, as it is shown in above demo:
public isButtonPressed: Array = [ false, false, false ];
onButtonClicked(index: number){
if (index >= 0 && index < this.isButtonPressed.length)
this.isButtonPressed[index] = !this.isButtonPressed[index];
}
<div class="app-block" #application>
<div class="btn-ovw-container">
<iui-button [allowAnimation]="true" [controlStyle]="ctrlStyle2" [pressed]="isButtonPressed[0]" (click)="onButtonClicked(0)">Button 1</iui-button>
<iui-button [allowAnimation]="true" [controlStyle]="ctrlStyle" [pressed]="isButtonPressed[1]" (click)="onButtonClicked(1)">Button 2</iui-button>
<iui-button [allowAnimation]="true" [controlStyle]="ctrlStyle3" [pressed]="isButtonPressed[2]" (click)="onButtonClicked(2)">Button 3</iui-button>
</div>
</div>
The following public methods are available:
You can modify the button appearance by changing the attributes of several built-in CSS classes. By default button appears in gray colors, and if a theme is applied in colors from the active theme.
However, you can further enhance the button by adding 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 button state that you want to change: disabled, focused, hovered, normal and selected:
public ctrlStyle: any = {
general: {
normal: 'btn-ovw',
}
}
<iui-button [allowAnimation]="true" [controlStyle]="ctrlStyle" [pressed]="isButtonPressed[1]" (click)="onButtonClicked(1)">Button 1</iui-button>
.btn-ovw
{
border-radius: 0;
display: inline-block;
padding: 10px;
margin-right: -5px;
}
To disable animations of the button state, you can simply set the allowAnimation property to false.
IntegralUI Button component for Angular replaces the standard button element. Using different properties and events and by providing your own CSS classes, you can customize the button appearance and behavior. Button can also appear as pressed or not, stating that some option or process is active or inactive. The button is also compatible with Angular Forms and can be used as part of it.
The Button component is part of IntegralUI Web.