react-stretchable
1.3.3 • Public • Published
import Zoomable from 'react-stretchable';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
const testOption = {
zoomable: {
width: {
min: 200,//default 10 拉伸最小宽度
max: 500//default 1000 拉伸最大宽度
},
height: {
min: 300,//default 10 拉伸最小高度
max: 500//default 500 拉伸最大高度
}
},
onZoomStart: (result) => {
console.log("onZoomStart", result);
},
onZoomEnd: (result) => {
console.log("onZoomEnd", result);
},
onZooming: (result) => {
console.log("onZooming", result);
}
}
return <Zoomable style={{background: "blue"}} {...testOption}>
<div>test</div>
</Zoomable>;
}
};
ReactDOM.render(
<App />,
document.getElementById('Test')
);
参数 |
说明 |
类型 |
默认值 |
defaultPositionX |
相对X轴的位移 |
number |
0 |
defaultPositionY |
相对Y轴的位移 |
number |
0 |
fixedWidth |
固定宽度,用于不拉伸宽度的情况下,一般使用非Number类型的宽度样式 |
|
null |
fixedHeight |
固定高度,用于不拉伸高度的情况下,一般使用非Number类型的高度样式 |
|
null |
draggable |
used |
是否使用react-draggable拖拽功能 |
boolean |
true |
options |
react-draggable api Invalid props: [position, defaultPosition]
|
object |
null |
handleCursor |
可拖拽区域的光标类型 |
string |
move |
className |
添加class样式 |
string |
"" |
style |
添加style属性 |
object |
{} |
zoomable |
used |
是否使用拉伸功能 |
boolean |
true |
direction |
可拉伸方向 |
array[string] |
["top", "right-top", "right", "right-bottom", "bottom", "left-bottom", "left", "left-top"] |
width |
min |
大于内容宽度时,设置为默认宽度 |
number |
10 |
max |
小于内容宽度时,设置为默认宽度 |
number |
1000 |
height |
min |
大于内容高度时,设置为默认高度 |
number |
10 |
max |
小于内容高度时,设置为默认高度 |
number |
500 |
onZoomStart |
拉伸开始时调用 |
function(param=object{direction:方向,position:位置{x,y},width:宽度,height:高度}) |
- |
onZooming |
拉伸进行中调用 |
function(param=object{direction:方向,position:位置{x,y},width:宽度,height:高度}) |
- |
onZoomEnd |
拉伸结束时调用 |
function(param=object{direction:方向,position:位置{x,y},width:宽度,height:高度}) |
- |
/react-stretchable/
//
Package Sidebar
Install
Weekly Downloads