Advanced User Interface Controls and Components
Created: 15 July 2016
Updated: 24 March 2017
IntegralUI Range is a native Angular 2 directive that allows you to set minimum and maximum width and height of HTML element or other Angular components. In addition, element size can change whenever its parent, page or window is resized. This allows you to resize automatically elements during run-time, which are related to other elements or the document in whole.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In above demo we have a small form with some labels and input elements. The form has a frame directive attached, which allows to change its size by simply clicking and dragging the resize marker, placed on the bottom-right of the form. Whenever the form is resized, the input elements will extend or decrease its size, while still keeping the whole structure in order.
To use the Range directive, you only need to attach the iuiRange attribute to some HTML element or Angular 2 component. Next, you need to set up the behavior of the directive by applying an object that holds the following properties:
All above properties are optional, and you can create an object that specifies only a few of them. The only requirement is the ref field, that determines how the element will resize, in relation to other elements or window itself. 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 { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { IntegralUIModule } from 'integralui/integralui.module';
@NgModule({
imports: [ BrowserModule, FormsModule, IntegralUIModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
//
// app.component.ts file
//
import { Component } from '@angular/core';
import { IntegralUIAnchorStyle } from 'integralui/components/integralui.core';
@Component({
selector: 'iui-app',
templateUrl: 'app.template.html',
styleUrls: ['range-overview.css']
})
export class AppComponent {
private rangeSettings = {
anchor: IntegralUIAnchorStyle.right,
resizeFactor: 0.5,
minWidth: 75,
maxWidth: 250,
ref: 'parent'
}
private rangeSettingsSubject = {
anchor: IntegralUIAnchorStyle.right,
resizeFactor: 1,
minWidth: 250,
maxWidth: 600,
ref: 'parent'
}
private rangeSettingsMessage = {
anchor: IntegralUIAnchorStyle.right | IntegralUIAnchorStyle.bottom,
resizeFactor: 1,
minHeight: 50,
minWidth: 250,
maxHeight: 200,
maxWidth: 600,
ref: 'parent'
}
private user: any = {
firstName: '',
lastName: '',
email: '',
phone: '',
subject: ''
}
constructor(){
}
}
bootstrap(AppComponent);
//
// app.template.html file
//
<div class="container" iuiFrame>
<label>First Name:</label><input [(ngModel)]="user.firstName" [iuiRange]="rangeSettings" />
<label>Last Name:</label><input [(ngModel)]="user.lastName" [iuiRange]="rangeSettings" />
<br/>
<label>E-mail:</label><input [(ngModel)]="user.email" [iuiRange]="rangeSettings" />
<label>Phone:</label><input [(ngModel)]="user.phone" [iuiRange]="rangeSettings" />
<br/>
<label>Subject:</label><input [(ngModel)]="user.subject" [iuiRange]="rangeSettingsSubject" style="width:450px" />
<br/><br/>
<label style="vertical-align: top;">Message:</label><textarea rows="4" cols="50" [(ngModel)]="user.message" [iuiRange]="rangeSettingsMessage"></textarea>
<br/><br/><br/>
<button class="btn-submit">Submit</button>
</div>
/*
range-overview.css file
*/
.container
{
background: #f5f5f5;
border: thin solid #bcbcbc;
overflow: hidden;
padding: 10px 10px 20px 10px;
position: relative;
width: 550px;
white-space: nowrap;
min-width: 360px;
max-width: 700px;
min-height: 300px;
max-height: 450px;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
}
label
{
display: inline-block;
margin: 10px;
width: 80px;
text-align: right;
}
textarea
{
resize: none;
width: 450px;
height: 100px;
}
.btn-submit
{
margin-left: 100px;
padding: 5px;
width: 75px;
}
In this example, the input elements are anchored and will change their width based on the width of the form. Whenever the form is resized (using a frame), these elements will grow or shrink its width and/or height. In this way, the form structure will remain in same format.
Top input elements are anchored to the right side, which means whenever the form changes its width, these elements will also change its width to fill the remaining space. In this case the resizeFactor field is set to 0.5, because there are two anchored elements in the same line.
The textarea element is anchored on right and bottom side, so that whenever the form changes its width and height, the text area will expand or shrink. Here, the resizeFactor is set to 1, because only this element is anchored in the same line of the form, horizontal and vertical.
private rangeSettings = {
anchor: IntegralUIAnchorStyles.right,
resizeFactor: 0.5,
minWidth: 75,
maxWidth: 250,
ref: 'parent'
}
The following anchor values are acceptable:
In addition, the form has its CSS attributes set, the min-width, max-width, min-height and max-height, so that it can be resize within these limits.
Note Of course, you can do this by simply using CSS settings for the elements and set their width in percentages. However, by using the Range directive you have more control on how and when you want to change the element size. Additionally, anchoring is not available from CSS.
Related: How to Change Element Size using a Frame
As you may notice in the code, the ref field is set to 'parent'. This notifies the Range directive that element will change its size based on changes to its immediate parent element. If this field is set to a 'window' value, then whenever the window is resized, an element with range directive attached, will also resize.
In some cases, you may want to limit the width or height to which the element should resize. As it is demonstrated, by setting the minWidth to 100 pixels, the input elements can only have minimum width of 100 pixels, after which changes will stop.
Setting values in percents, allows you to change the element width or height based on percentage of total width or height of related element or window.
Currently only one event is supported:
Whenever an element is resized, the sizeChanged event is fired. You can handle this event in your code and add custom functionality. The element new width and height are carried with the event.
To subscribe to this event, apply the sizeChanged name to HTML element next to the iuiRange attribute. Then add a function in your app code that will act as an event handler:
//
// app.component.ts file
//
export class AppComponent {
elemSizeChanged(e){
console.log("New element size: { " + e.width + "px, " + e.height + "px }");
}
}
//
// app.template.html file
//
<label>First Name:</label><input [(ngModel)]="user.firstName" [iuiRange]="rangeSettings" (sizeChanged)="elemSizeChanged($event)" />
IntegralUI Range is a native Angular 2 directive that is attachable to any HTML element or other components. It allows you to set how the element size will change during run-time, based on changes to its parent element, page or window.
The Range component is part of IntegralUI Web.