angular resizable

其他类别 2025-07-30

可抗角

用于创建可分解容器的指令。

为什么?

我遇到的所有其他可重大指令概念都包括指令中的布局逻辑。我想要一个仅处理调整逻辑的指令。这样,布局逻辑就会隔离到CSS。

用法

  1. npm install angular-resizablebower install angular-resizable或克隆/下载此仓库
  2. 在您的项目中包含angular-resizable.min.js
  3. 在您的项目中还包括angular-resizable.min.css (这为调整大小的手柄提供了默认样式)。
  4. 然后在您的应用中包含模块: angular.module('app', ['angularResizable'])
  5. 使用它:

r-directions内部的阵列中包括您要在阵列中解析的任何侧面。接受“顶部”,“右”,“底部”和“左”。您可以根据需要为手柄造型。只需在您自己的样式表中覆盖CSS中的样式即可。

选项

属性默认接受描述
rdirections ['正确的'] ['top','右','底部,“左”,],]确定元素的哪个侧面可以解析。
RFLEX错误的布尔如果您使用的是Flexbox,则将其设置为True。请参阅此Codepen。
rcenteredx错误的布尔如果设置为真,则水平调整速度将加倍。
rcenteredy错误的布尔如果设置为真,则垂直调整的速度将加倍。
rwidth错误的整数或$示波器变量如果设置,相对于像素中的该值,将用预定义的宽度呈现可重新算出的元素,并且将在“ rwidth”属性上设置观察者。请参阅此Codepen。
Rheight错误的整数或$示波器变量如果设置,则可以用预定义的高度相对于像素中的该值渲染可重新算出的元素,并且将在“ Rheight”属性上设置观察者。请参阅此Codepen。
rgrabber 细绳定义抓手的自定义内部HTML。
rnothrottle错误的布尔禁用angular-resizable.resizing进行节流(请参见下面的事件部分)。

事件

有关使用这些事件的示例,请参见此Codepen。

Angular-groizable.Resizestart

此事件是在调整大小的开头的以下信息对象发出的:

  • info.width :调整大小开始时指令的宽度。如果垂直调整大小,将是错误的
  • info.height :调整大小开始时指令的高度。如果水平调整大小,将是错误的
  • info.id :指令的ID。如果没有ID集,将是错误的。
  • info.evt :原始鼠标事件对象

可抵抗的

鼠标移动时反复打电话。默认情况下,每100毫秒每100ms一次致电一次以保持CPU使用率较低。要进行平滑调整大小,请使用rNoThrottle属性。此事件是在元素调整以下对象的调整期间发出的,作为参数:

  • info.width :调整大小结束时指令的宽度。如果垂直调整大小,将是错误的
  • info.height :调整大小末端的指令的高度。如果水平调整大小,将是错误的
  • info.id :指令的ID。如果没有ID集,将是错误的。
  • info.evt :原始鼠标事件对象

Angular-grizizable.resizeEnd

该事件在调整大小的结尾处发出以下对象作为参数:

  • info.width :调整大小结束时指令的宽度。如果垂直调整大小,将是错误的
  • info.height :调整大小末端的指令的高度。如果水平调整大小,将是错误的
  • info.id :指令的ID。如果没有ID集,将是错误的。
  • info.evt :原始鼠标事件对象

版本注释

1.2.0

  • 添加Angular-Resizable.sization Event(请参阅拉请请求#7)
  • 添加用于向Grabber元素提供自定义内部HTML的属性(请参阅拉请求#7)

执照

麻省理工学院

下载源码

通过命令行克隆项目:

git clone https://github.com/Reklino/angular-resizable.git