Advanced User Interface Controls and Components
Created: 09 June 2016
Updated: 14 April 2017
IntegralUI Accordion is a native Angular 2 component that represents a list of expandable panels arranged vertically. It is a more advanced version of Accordion directive for AngularJS. In this article, we will give detailed information on what features are included in Accordion component.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
The demonstration above shows only the basic features available in Accordion component. There are few group boxes each with a header and content panel. Animations during expand/collapse are built using only CSS.
There are two ways to create an accordion in your app:
In simple forms, accordions only require little or none javascript code; mostly they only require settings on how the accordion will look like using HTML.
In Angular 2, at first we need to create a root component. This component will hold the Accordion and/or other components and HTML elements. Accordion component by itself cannot do much. We need to use the GroupBox component as its content. The GroupBox component consists of a header and content panel; both are fully customizable.
In order to add groups to the Accordion, we can either set them manually in HTML or create an array object that will hold all groups. For example:
//
// 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: ['accordion-overview.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
// An Array object that holds all group objects shown in Accordion
// It is set as a list of any custom objects, you can use any custom fields and data bind them with Accordion using its properties
private data: Array<any>;
// Initialize accordion groups in component constructor
constructor(){
this.data = [
{
icon: 'library',
text: 'Books',
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.'
},
{
icon: 'album',
text: 'Music',
body: 'Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat.'
},
{
icon: 'star-empty',
text: 'Favorites',
body: 'Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst.'
}
];
}
}
bootstrap(AppComponent);
//
// app.template.html file
//
<style>
.group-content
{
padding: 50px 0;
border: thin solid #bbbbbb;
padding: 10px;
border-top-color: transparent;
font-family: Calibri, Tahoma, Arial, Helvetica, sans-serif;
}
</style>
<div style="width:400px">
<iui-accordion [groups]="data">
<iui-groupbox *ngFor="let group of data" text="{{group.text}}" icon="{{group.icon}}">
<div class="group-content">{{group.body}}</div>
</iui-groupbox>
</iui-accordion>
</div>
/*
accordion-overview.css file
*/
.group-content
{
padding: 50px 0;
border: thin solid #bbbbbb;
padding: 10px;
border-top-color: transparent;
font-family: Calibri, Tahoma, Arial, Helvetica, sans-serif;
}
.icons
{
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;
}
.library
{
background-position: 0 -72px;
}
.album
{
background-position: -144px -48px;
}
.star-empty
{
background-position: -216px -72px;
}
This is basic form, where each group has a title and icon in its header, and content panel shows a text in multiple lines. It is good enough as a start point, you can modify it further to add custom content to group header or its content panel.
In cases where you want to handle events and/or complex scenarios like adding command buttons to the accordion headers, it requires additional code in Angular. For example, you can create an accordion where in each header there is a checkbox. When checked, the specified accordion group can become collapsed and disabled.
All properties of the accordion 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:
Note The GroupBox component is a separate component that can also be used outside of the Accordion.
For advanced settings, for example when we have a custom data source which may differ from internal data settings of the accordion, we can use data binding which will match the names of data fields in your data source with those used by the accordion.
By specifying the groups property to point to your data object, along with dataFields property that holds an object that maps the names of fields in the data object, you can populate the Accordion using any kind of custom data source.
This feature is also usable when you need to create an accordion dynamically on demand, by loading additional groups from a remote data source when required.
Most of actions in Accordion are accompanied by events. For example, whenever a GroupBox is selected, the selection events are thrown, or when a group is expanded or collapsed, expanding and collapsing events are thrown, etc.
Here is a list of available events:
In most cases, you will set the Accordion with all groups and their content from the start in HTML. However, sometimes you may need to add a new group dynamically on demand or even change the whole content of the Accordion.
For this purpose, you can use the built-in methods that allow you to change dynamically the structure of the Accordion:
//
// app.component.ts file
//
export class AppComponent {
// An Array object that holds all group objects shown in Accordion
// It is set as a list of any custom objects, you can use any custom fields and data bind them with Accordion using its properties
private data: Array
// Get a reference to the Accordion component using a variable set in HTML
@ViewChild('accordion') accordion: IntegralUIAccordion;
// Initialize accordion groups in component constructor
constructor(){
this.data = [];
}
// Adds a new group to the end of the Accordion
addGroup(){
this.accordion.addGroup({ text: "Group " + (this.data.length+1).toString() });
}
// Fired whenever a new group is added to the Accordion
groupAddedEvent(e){
if (e.group)
console.log("groupAdded: " + e.group.text);
}
}
bootstrap(AppComponent);
//
// app.template.html file
//
<style>
.group-content
{
padding: 50px 0;
border: thin solid #bbbbbb;
padding: 10px;
border-top-color: transparent;
font-family: Calibri, Tahoma, Arial, Helvetica, sans-serif;
}
</style>
<div style="width:400px">
<iui-accordion [groups]="data" (groupAdded)="groupAddedEvent($event)" #accordion>
<iui-groupbox *ngFor="let group of data" text="{{group.text}}">
<div class="group-content">{{group.text}} Content</div>
</iui-groupbox>
</iui-accordion>
<br/>
<button (click)="addGroup()">Add Group</button>
</div>
In above code, we are adding a new group using the addGroup method. To access this method, at first we need to get a reference to the Accordion component. In HTML we are adding the #accordion variable, which is used to locate the Accordion within your application component.
After we have a reference to the Accordion component, we can get access to all public methods available.
Note In this example we are also setting a handler for groupAdded event. Whenever a new group is added, this event is fired. In our handler, the console window will show a message stating teh name of the group that is added.
Here is a list of available methods:
Each part of the accordion is fully customizable. There are many CSS classes for each part of the Accordion, specified in a style sheet. By changing these classes in your code, you can modify the appearance of the accordion.
Accordion appearance can be changed using a set of CSS classes for all parts, or a specific class for a specific part. For example, all accordion groups can appear in different color.
From sample shown here, you can notice that there are several animations:
All these animations are done using CSS3, there are several animations classes present in accordion style sheet. By modifying these classes, you can change current animations by adding your own custom animations.
This is a brief introduction to the IntegralUI Accordion for Angular 2, showing only basic features.
The Accordion component is part of IntegralUI Web.