resize-border v1.0.2

ResizeBorder v1.0.2

Angular v6 component

You can define an element such as a div that can be resized

Demo

https://stackblitz.com/github/liangshen001/resize-border

Installation

npm install --save resize-border

Usage

import {ResizeBorderModule} from 'resize-border';

div {
    text-align: center;
    width: 200px;
    height: 200px
}
.stream-element {
    background: red;
}
.absolute-element {
    position: absolute;
    top: 300px;
    right: 300px;
    background: blue;
}
.float-element {
    float: right;
    background: aqua;
}

Elements in a normal stream

<div class="stream-element"
     resizeBorder
     [resizeBottom]="true"
     [resizeRight]="true"
     [minHeight]="50"
     [minWidth]="50">
    i am a common stream element
</div>

Floating element

<div class="float-element"
     resizeBorder
     [resizeBottom]="true"
     [resizeLeft]="true"
     [minHeight]="50"
     [minWidth]="50"
     [maxHeight]="300"
     [maxWidth]="300">
    i am a float element
</div>

Positioned element

<div class="absolute-element"
     resizeBorder
     [resizeTop]="true"
     [resizeBottom]="true"
     [resizeLeft]="true"
     [resizeRight]="true"
     [minHeight]="50"
     [minWidth]="50">
    i am a absolute element
</div>

note: To facilitate the operation of the minHeight and minWidth property, try to set it to be larger than 8px

Contributers

wangliang520wl@hotmail.com