angular-resizable

WebJar for angular-resizable

License	License MIT
Categories	Categories Angular User Interface Web Frameworks
GroupId	GroupId org.webjars.bower
ArtifactId	ArtifactId angular-resizable
Last Version	Last Version 1.2.0
Release Date	Release Date Aug 12, 2015
Type	Type jar
Description	Description angular-resizable WebJar for angular-resizable
Project URL	Project URL http://webjars.org
Source Code Management	Source Code Management https://github.com/Reklino/angular-resizable

Download angular-resizable

Filename	Size
angular-resizable-1.2.0.pom
angular-resizable-1.2.0.jar	8 KB
angular-resizable-1.2.0-sources.jar	22 bytes
angular-resizable-1.2.0-javadoc.jar	22 bytes
Browse

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-resizable/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-resizable</artifactId>
    <version>1.2.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/angular-resizable/
implementation 'org.webjars.bower:angular-resizable:1.2.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/angular-resizable/
implementation ("org.webjars.bower:angular-resizable:1.2.0")

Apache Buildr

'org.webjars.bower:angular-resizable:jar:1.2.0'

Apache Ivy

<dependency org="org.webjars.bower" name="angular-resizable" rev="1.2.0">
  <artifact name="angular-resizable" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='angular-resizable', version='1.2.0')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "angular-resizable" % "1.2.0"

Leiningen

[org.webjars.bower/angular-resizable "1.2.0"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.bower : angular	jar	[1.3.15,1.4)

Project Modules

There are no modules declared in this project.

angular-resizable

A directive for creating resizable containers.

Why?

All other resizable directive concepts I came across include layout logic in the directive. I wanted a directive that only handled the resize logic. This way, the layout logic is quarantined to the CSS.

Usage

npm install angular-resizable or bower install angular-resizable or clone/download this repo
Include angular-resizable.min.js in your project.
Include angular-resizable.min.css in your project as well (this provides default styling for the resize handles).
Then include the module in your app: angular.module('app', ['angularResizable'])
Use it: <section resizable r-directions="['bottom', 'right']" r-flex="true">

Include any sides you want to be resizable in an array inside r-directions. Accepts 'top','right','bottom', and 'left'. You can style the handles however you want. Just override the styles in the css in your own stylesheet.

Options

Attributes	Default	Accepts	Description
rDirections	['right']	['top', 'right', 'bottom', 'left',]	Determines which sides of the element are resizable.
rFlex	false	boolean	Set as true if you are using flexbox. See this codepen.
rCenteredX	false	boolean	If set as true, the velocity of horizontal resizing will be doubled.
rCenteredY	false	boolean	If set as true, the velocity of vertical resizing will be doubled.
rWidth	false	integer or $scope variable	If set, the resizable element will be rendered with a predefined width relative to this value in pixels and a watcher will be set on the 'rWidth' attribute. See this codepen.
rHeight	false	integer or $scope variable	If set, the resizable element will be rendered with a predefined height relative to this value in pixels and a watcher will be set on the 'rHeight' attribute. See this codepen.
rGrabber	`<span></span>`	string	Defines custom inner html for the grabber.
rNoThrottle	false	boolean	Disables `angular-resizable.resizing` throttling (see events section below).

Events

For an example using the events, see this codepen.