如何做论文网站,网站建设产品,开封做网站公司,建站快车来电目录 安装使用方法示例Props 属性方法示例代码调整兄弟div的宽度 re-resizable github地址 安装
$ npm install --save re-resizable这将安装re-resizable库并将其保存为项目的依赖项。
使用方法
re-resizable 提供了一个 Resizable 组件#xff0c;它可以包裹任何… 目录 安装使用方法示例Props 属性方法示例代码调整兄弟div的宽度 re-resizable github地址 安装
$ npm install --save re-resizable这将安装re-resizable库并将其保存为项目的依赖项。
使用方法
re-resizable 提供了一个 Resizable 组件它可以包裹任何内容并使其可调整大小。
示例 使用默认大小 ResizabledefaultSize{{width: 320,height: 200,}}
Sample with default size
/Resizable这将创建一个初始宽度为320像素高度为200像素的可调整大小的组件。 使用状态控制大小 Resizablesize{{ width: this.state.width, height: this.state.height }}onResizeStop{(e, direction, ref, d) {this.setState({width: this.state.width d.width,height: this.state.height d.height,});}}
Sample with size
/Resizable这个示例展示了如何使用组件的状态来控制和更新可调整大小组件的尺寸。
Props 属性
defaultSize: 设置拖动项的起始宽度和高度。size: 控制组件的大小可以是数字或字符串如 50%。className: 设置自定义类名。style: 设置自定义样式。minWidth 和 minHeight: 设置最小宽度和高度。maxWidth 和 maxHeight: 设置最大宽度和高度。grid: 指定调整大小的增量。lockAspectRatio: 锁定宽高比。lockAspectRatioExtraWidth 和 lockAspectRatioExtraHeight: 允许在保持宽高比的同时增加额外的宽度或高度。bounds: 指定调整大小的边界。handleStyles, handleClasses, handleComponent, handleWrapperStyle, handleWrapperClass: 自定义调整手柄的样式、类名、组件和包装器样式。enable: 设置可调整大小的权限。onResizeStart, onResize, onResizeStop: 在调整大小开始、进行中和停止时调用的回调函数。
方法
updateSize(size): 更新组件的大小忽略 grid 和 max/minWidth、max/minHeight 属性。
示例代码
class YourComponent extends Component {...update() {this.resizable.updateSize({ width: 200, height: 300 });}render() {return (Resizable ref{c { this.resizable c; }}example/Resizable);}...
}在这个示例中update 方法用于通过引用调用 updateSize 方法来更新可调整大小组件的大小。
re-resizable 提供了丰富的API和灵活的配置选项使得在React应用中实现自定义的可调整大小界面元素变得简单。
总宽度是固定的改变一个容器的宽度其他容器的宽度会自动增大或减小。
如下图所示有两个并排排列颜色不同的容器拖拽蓝色容器的右边缘可动态改变二者的宽度
调整兄弟div的宽度
例如总宽度是固定的改变一个容器的宽度其他容器的宽度会自动增大或减小。
如下图所示有两个并排排列颜色不同的容器拖拽蓝色容器的右边缘可动态改变二者的宽度 实现的上述效果也很简单re-resizable提供了onResize方法给我们在我们调整宽度时会输出其容器改变后的的位置信息 所以我们可以利用该方法将改变了多少宽度值放在state中然后再红色容器的宽度设置中减去该值就可以实现上述的效果了。
import { Resizable } from re-resizable;
import { useState } from react;export default function Demo() {const [w, setW] useStatenumber(0);return (div style{{ display: flex, margin: 30 }}Resizable defaultSize{{ width: 400, height: 300 }} maxWidth{700} onResize{(e: any) setW(e.x - 400)}div style{{ backgroundColor: blue, width: 100%, height: 100% }}/div/Resizablediv style{{ backgroundColor: red, width: calc(400px - ${w}px), height: 300 }}/div/div);
}
