LIDOR SYSTEMS

Advanced User Interface Controls and Components

Overview of IntegralUI GroupBox for Angular 2

Created: 10 June 2016

Updated: 21 December 2016

IntegralUI GroupBox is a native Angular 2 component that represents a collapsible panel. It consists of a header and content panel, header displays the group title with and in content panel you can place any other custom HTML elements. In this article, we will give detailed information on what features are included in GroupBox component.

GroupBox component is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

The demonstration above is simple; we have a group box with title and icon displayed in its header and content panel that by default is hidden. Whenever the group header is clicked, the content panel will expand and become visible. Expanding and collapsing of the content panel is accompanied with built-in animations using only CSS.

How to Use IntegralUI GroupBox in Angular 2

In simplest form, the GroupBox component requires only to be set in HTML within your application component.

//

// main.ts file

//

 

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

 

const platform = platformBrowserDynamic();

platform.bootstrapModule(AppModule);

 

 

 

//

// app.module.ts file

//

 

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { IntegralUIModule } from './integralui/integralui.module';

 

@NgModule({

imports: [ BrowserModule, IntegralUIModule ],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

 

 

 

//

// app.component.ts file

//

 

import { Component, ViewEncapsulation } from '@angular/core';

 

@Component({

selector: 'iui-app',

templateUrl: 'app.template.html',

styleUrls: ['groupbox-overview.css'],

encapsulation: ViewEncapsulation.None

})

export class AppComponent {

constructor(){

}

 

submitClicked(){

alert("Submit button was clicked.");

}

}

 

bootstrap(AppComponent);

//

// app.template.html file

//

 

<div class="sample-container">

<iui-groupbox text="Login" icon="user">

<div class="group-content">

<span>User name:</span><input type="text" /><br/>

<span>Password:</span><input type="password" /><br/>

<button (click)="submitClicked()">Submit</button>

</div>

</iui-groupbox>

</div>

/*

groupbox-overview.css file

*/

.sample-container

{

width: 290px;

}

.group-content

{

padding: 50px 10px;

border: thin solid #dddddd;

padding: 10px;

border-top-color: transparent;

font-family: Calibri, Tahoma, Arial, Helvetica, sans-serif;

}

.group-content span

{

display: inline-block;

margin: 2px 5px 5px 2px;

width: 80px;

text-align: right;

}

.group-content button

{

background: #dddddd;

border: thin solid #aaaaaa;

margin: 10px 0 0 185px;

padding: 5px;

width: 75px;

}

.group-content button:hover

{

background: #e5e5e5;

}

.iui-groupbox .iui-item

{

background-color: #727272;

border: solid thin #484848;

color: #ffffff;

}

.iui-groupbox .iui-item-hovered

{

background-color: #898989;

border-color: #646464;

}

.iui-groupbox .iui-item-selected

{

background-color: #275d8c;

border-color: #204d74;

color: white;

}

.iui-groupbox-content

{

background-color: #ffffff;

}

.iui-item-icon

{

background: url(../resources/icons-x24.png) no-repeat 0 0;

display: inline-block;

padding: 0 !important;

margin: 0 1px 0 5px;

width: 24px;

height: 24px;

vertical-align: middle;

}

.user

{

background-position: -48px -168px;

}

As you can see from the HTML, for icon we use the name of CSS class that points to an image. As for group title, you only to set the text property to some string value.

Inside content panel, you can place any other component or HTML elements and arrange them in custom layouts. Additionally, all of these elements are customizable from CSS classes set inside your application component template or style sheet.

In our example, we have some input and button elements in the content panel. Whenever the 'Submit' button is clicked, a popup message will appear.

Note The GroupBox component can be included in other Angular Components. For example, IntegralUI Accordion arranges multiple group boxes in horizontal or vertical layout. You can use the GroupBox to create other more advanced components.

In cases where you want to handle events and other scenarios like adding custom expand box in the group header, it requires additional code in Angular. For example, you can create an group box that shows multiple lines of text in the header and a checkbox on the left side. When checked, the group box can become collapsed and disabled.

All properties of the GroupBox component can be set using a separate attribute that is linked to an object in your application scope or a specified value.

Here is a list of available properties:

  • expanded - determines whether content panel is expanded or collapsed
  • icon - specifies an icon that is displayed in group header
  • text - represents the group header title
  • selected - determines whether group box is selected

Supported Events

Most of actions in the GroupBox are accompanied by events. For example, whenever a GroupBox is expanded or collapsed, expanding and collapsing events are fired.

Here is a list of available events:

  • afterCollapse - occurs after content panel is collapsed
  • afterExpand - occurs after content panel is expanded
  • beforeCollapse - occurs before content panel is collapsed
  • beforeExpand - occurs before content panel is expanded
  • selectedChanged - occurs when selected property changes its value

Supported Methods

In current version, there are few methods that you can use to change the state of the GroupBox programmatically from Angular code:

  • collapse - collapses and hides the content panel of the group box
  • expand - expands and shows the content panel of the group box
  • toggle - changes the group box from expanded to collapsed state and vice versa

You can use these methods to either expand or collapse the content panel of the group box, outiside of the component. For example by adding a button that when clicked will toggle the group box between expanded and collapsed state.

//

// app.component.ts file

//

 

export class AppComponent {

// Get a reference to the GroupBox component using a variable set in HTML

@ViewChild('groupbox') groupbox: IntegralUIGroupBox;

 

constructor(){

}

 

submitClicked(){

alert("Submit button was clicked.");

}

 

// Change the state of the GroupBox from expanded to collapsed and vice versa

toggleGroupBox(){

this.groupbox.toggle();

}

}

//

// app.template.html file

//

 

<button (click)="toggleGroupBox()">Toggle</button>

<div class="sample-container" #groupbox>

<iui-groupbox text="Login" icon="user">

<div class="group-content">

<span>User name:</span><input type="text" /><br/>

<span>Password:</span><input type="password" /><br/>

<button (click)="submitClicked()">Submit</button>

</div>

</iui-groupbox>

</div>

In order to access these methods, at first we need to get a reference to the GroupBox component. In HTML we are adding the #groupbox variable, which is used to locate the GroupBox within your application component.

After we have a reference to the GroupBox component, we can call any of public methods available, in your application code.

Note You can also use this reference to subscribe to some or all available events. This allows you to set event handlers from your code, instead of setting the event attributes in HTML.

How to Customize the GroupBox Appearance

The GroupBox consists of header and content panel. There are several CSS classes that governs the layout and appearance of these parts. By modifying the attributes of built-in CSS classes, you can alter the appearance of the GroupBox in whole.

Additionally, you can set your own CSS classes in your app component, for custom content added in the group header and content panel.

To animate the expanding and collapsing of the content panel, we are using only CSS. The speed and type of animation used can be changed by overriding the built-in CSS classes. Further versions of this component will include options to add custom animations.

Conclusion

This is a brief introduction to the IntegralUI GroupBox for Angular 2, showing only basic features. Currently this component is in BETA. Future versions of this component will include more advanced features like: context menus, tooltips, custom appearance, custom animations and more.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.