Advanced User Interface Controls and Components
Created: 14 July 2016
Updated: 24 March 2017
IntegralUI Frame is a native Angular 2 directive that can be attached to any component or HTML element. It provides functionality that allows you to resize elements during run-time. The element to which this directive is attached, will display a frame and a marker on bottom-right corner that when clicked and dragged will resize the element.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In above demo we have three paragraphs with some text in it. Each paragraph has the IntegralUI Frame directive attached, which by default is hidden. Whenever the mouse cursor is moved over the paragraph space, the frame will appear. If you click and drag the edge of the frame, you can resize the paragraph. This allows you to change the element width and height on demand, during run-time.
The Frame component is simple to use. You only need to apply the directive name to the HTML element and set its behavior using these properties:
All above properties are specified using an object that is applied to the directive name. 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 { IntegralUIVisibility } from 'integralui/components/integralui.core';
@Component({
selector: 'iui-app',
templateUrl: 'app.template.html',
styleUrls: ['frame-overview.css']
})
export class AppComponent {
private frameSettings = {
visible: IntegralUIVisibility.hover
}
constructor(){
}
}
bootstrap(AppComponent);
//
// app.template.html file
//
<div class="container">
<div class="text-block small" [iuiFrame]="frameSettings">
<p>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.</p>
</div>
<div class="text-block small" [iuiFrame]="frameSettings">
<p>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.</p>
</div>
<div class="text-block large" [iuiFrame]="frameSettings">
<p>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.</p>
</div>
</div>
/*
frame-overview.css file
*/
.container
{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
}
.text-block
{
border: thin solid #bcbcbc;
overflow: hidden;
padding: 5px;
position: relative;
width: 200px;
height: 125px;
}
.text-block p
{
margin: 0;
padding: 0;
}
.small
{
float: left;
width: 300px;
}
.large
{
clear: both;
width: 600px;
}
As you can see from above HTML code, we are using the iuiFrame name to attach a frame to each paragraph. To bind the object that holds the frame settings, we only need to enclose the directive name with standard Angular binding brackets []. Next, you need to apply the object to the right of the directive name.
Related: How to Auto Resize Child Elements when Parent Element Size Changes
As the directive settings state, the frame will be displayed only when mouse cursor hovers over element space. By changing the object visible field to 'always', the frame will remain visible.
Note None of mentioned properties are required, the only requirement is the directive name to be applied to a specific HTML element or Angular 2 component.
Currently only this event is supported:
Whenever an element is resized, the sizeChanged event is fired. This allows you to add custom functionality in your code. The event carries an object that holds the width and height of the element.
To subscribe to this event, use the small brackets to enclose the sizeChanged name, and apply a function as an event handler:
//
// app.component.ts file
//
export class AppComponent {
frameSizeChanged(e){
console.log("New element size: { " + e.width + "px, " + e.height + "px }");
}
}
//
// app.template.html file
//
<div class="text-block small" [iuiFrame]="frameSettings" (sizeChanged)="frameSizeChanged($event)">
<p>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.</p>
</div>
IntegralUI Frame is a small Angular 2 directive that is attachable to any component or HTML element. It enables changes to element width and height, dynamically during run-time.
The Frame component is part of IntegralUI Web.