Advanced User Interface Controls and Components
Created: 21 October 2016
Updated: 24 March 2017
IntegralUI SlideBar is a native Angular 2 component that allows you to animate slides created using images or custom content. It is a more advanced version of SlideBar directive for AngularJS. In this article, we will give detailed information on what features are included in SlideBar 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 SlideBar component. There are few slides each showing a title. Slide changes are automatic and animated from right to left. Whenever a slide is selected, an animation runs showing the slide content in current view of the SlideBar component. Using navigation buttons, you can quickly switch to specific slide.
In order to use the SlideBar component in your app, you need to do the following:
SlideBar accepts IntegralUISlide components as their content. It then arranges present slides in single line, showing only one slide at a time. Depending on animationSpeed property value, slides are moved from right to left, followed by a pause.
You can add custom content to each slide using HTML elements or other Angular components. Whenever a slide is selected, its content appears in the current view of the SlideBar.
In order to add slides to the SlideBar, you can either set them manually in HTML or create an array object that will hold all slides. 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 } from '@angular/core';
@Component({
selector: 'iui-app',
templateUrl: 'app.template.html',
styleUrls: ['slidebar-overview.css']
})
export class AppComponent {
// An Array object that holds all item objects shown in SlideBar
// It is set as a list of any custom objects, you can use any custom fields and bind them with SlideBar using its properties
private slides: Array<any>;
// Initialize slides in component constructor
constructor(){
this.slides = [
{ text: "Slide 1" },
{ text: "Slide 2" },
{ text: "Slide 3" }
];
}
}
//
// app.template.html file
//
<iui-slidebar>
<iui-slide *ngFor="let slide of slides">
<div class="slide-block">
<span>{{slide.text}}</span>
</div>
</iui-slide>
</iui-slidebar>
/*
slidebar-overview.css file
*/
.slide-block
{
width: 300px;
height: 250px;
}
.slide-block span
{
display: block;
padding-top: 115px;
text-align: center;
}
In order to change the behavior of the SlideBar component, you can use the following properties:
By setting above properties, you can alter the behavior of the SLideBar component. For example, you can:
Most of actions in SlideBar are accompanied by events. For example, whenever a slide is selected or changed, the slideChanged event is fired, or when a new slide is added or existing one is removed, the add/remove events are fired, etc.
Here is a list of available events:
By handling the slideChanged event, you can add custom functionality in your code that will execute when particular slide is present in current view. On the other hand, you can add other custom action that may be required in your application.
private selIndex: number = -1;
onSlideChanged(e){
this.selIndex = e.index;
}
<iui-slidebar [selectedIndex]="selIndex" (slideChanged)="onSlideChanged($event)">
<iui-slide *ngFor="let slide of slides">
<div class="slide-block">
<span>{{slide.text}}</span>
</div>
</iui-slide>
</iui-slidebar>
There are two types of navigation buttons in SlideBar component: slide and arrow buttons.
Slide buttons are placed below the current view, their number is equal with the number of slides. Whenever some of these buttons is clicked, a slide with corresponding index will appear in current view of the SlideBar. This is useful to quickly navigate to specific slide and continue with presentation from there.
By setting the showNavigationPanel property value to true or false, you can show or hide this set of buttons.
Arrow buttons are placed on left and right side of the current view. They will appear when mouse cursor hovers over current view. Mostly these buttons are used to quickly navigate to the next or previous slide from the list. This navigation is circular, meaning that when the end is reached, it will continue to the last or first slide, depending on whether left or right button is clicked.
In most cases, you can use only HTML to set the SlideBar with all slides and their content. However, there may be a case when you need to add a new slide dynamically on demand or even change its content during run-time.
For this purpose, you can use the built-in methods that allow you to change dynamically the structure of the SlideBar:
//
// app.component.ts file
//
import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'iui-app',
templateUrl: 'app.template.html',
styleUrls: ['slidebar-overview.css']
})
export class AppComponent {
// Get a reference of SlideBar component
@ViewChild('slidebar') slideBar: IntegralUISlideBar;
// An Array object that holds all slide objects shown in SlideBar
// It is set as a list of any custom objects, you can use any custom fields and bind them with SlideBar using its properties
private slides: Array
private slides: Array
// Initialize slides in component constructor
constructor(){
this.slides = [
{ text: "Slide 1" },
{ text: "Slide 2" },
{ text: "Slide 3" }
];
}
// Adds a new slide at second position
addSlide(){
this.slideBar.insertSlideAt({ text: "Slide " + (this.slides.length+1).toString() }, 1);
}
// Fired whenever a new slide is added to the SlideBar
slideAddedEvent(e){
if (e.slide)
console.log("slideAdded: " + e.slide.text);
}
}
//
// app.template.html file
//
<iui-slidebar (slideAdded)="onSlideAdded($event)" #slidebar>
<iui-slide *ngFor="let slide of slides">
<div class="slide-block">
<span>{{slide.text}}</span>
</div>
</iui-slide>
</iui-slidebar>
In above code, we are adding a new slide using the addSlide method. To access this method, at first we need to get a reference to the SlideBar component. In Angular 2 this is simple, in HTML add the #slidebar variable (or you may choose any other name for the variable) to the
After you have a reference to the SlideBar component, you can get access to all public methods available:
The SlideBar component comes with a style sheet that contains all CSS classes used by the slide strip. By changing the attributes of these classes in your code, you can modify the appearance of the SlideBar, partially or in whole.
Furthermore, you can add your own CSS classes and override the default ones within your application code. For this purpose, the controlStyle property is used, which is an object holding the names of CSS classes for each control part. By changing this object value, you can add the names of new classes and replace the default ones.
IntegralUI SlideBar component allows you to animate slides created using custom content. Each slide can contain custom HTML elements or other Angular components as its content. By using different properties you can choose how fast slides are changed and whether navigation buttons are present or not.
The SlideBar component is part of IntegralUI Web.