Advanced User Interface Controls and Components
Created: 10 June 2016
Updated: 24 March 2017
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.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
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.
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:
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:
In current version, there are few methods that you can use to change the state of the GroupBox programmatically from Angular code:
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.
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.
This is a brief introduction to the IntegralUI GroupBox for Angular 2, showing only basic features.
The GroupBox component is part of IntegralUI Web.