@uiw/react-split
Advanced tools
A piece of view can be divided into areas where the width or height can be adjusted by dragging.
可将一块内容，分割为可以拖拽调整宽度或高度的区域。
import { Split } from 'uiw';
从组件库 uiw 中抽离出来的 @uiw/react-split，可以单独使用。
import Split from '@uiw/react-split';
通过设置子节点的minWidth样式，即可设置拖拽最小宽度值。通过设置子节点样式flexBasis样式即可设置默认分割内容的占比宽度。
width: '80%' 宽度百分百来计算。minWidth: 30，来达到效果width，需要将某个子节点样式设为 flex: 1，来自适应import ReactDOM from 'react-dom';
import Split from '@uiw/react-split';
const Demo = () => (
<div>
<Split style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>
<div style={{ width: '20%', minWidth: 30 }}>
<iframe
srcDoc="<div>test</div>"
style={{ width: '100%', height: '100%' }}
title="Code Preview"
sandbox="allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts"
/>
</div>
<div style={{ width: '80%', minWidth: 100 }}>
Right Pane
</div>
</Split>
<Split
style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}
>
<div style={{ minWidth: 60 }}>
test
</div>
<div style={{ minWidth: 80, flex: 1 }}>
Right Pane
</div>
</Split>
</div>
);
ReactDOM.render(<Demo />, _mount_);
设置 visiable={false} 禁用拖拽栏，可用于布局。
import ReactDOM from 'react-dom';
import Split from '@uiw/react-split';
const Demo = () => (
<div>
<Split mode="vertical" visiable={false}>
<div style={{ minHeight: 45, background: '#dcdcdc' }}>
Header
</div>
<Split visiable={false}>
<div style={{ minWidth: 200, maxWidth: 200, minHeight: 120, background: '#b5b5b5' }}>
Sider
</div>
<div style={{ width: '100%', background: '#ececec' }}>
Content
</div>
</Split>
<div style={{ minHeight: 45, background: '#dcdcdc' }}>
Footer
</div>
</Split>
<div style={{ height: 20 }}></div>
<Split visiable={false}>
<div style={{ minWidth: 200, maxWidth: 200, minHeight: 85, background: '#a9a9a9' }}>
Sider
</div>
<Split mode="vertical" visiable={false} style={{ width: '100%' }}>
<div style={{ minHeight: 45, background: '#dcdcdc' }}>
Header
</div>
<div style={{ minHeight: 85, background: '#b5b5b5' }}>
Content
</div>
<div style={{ minHeight: 45, background: '#dcdcdc' }}>
Footer
</div>
</Split>
</Split>
</div>
);
ReactDOM.render(<Demo />, _mount_);
import ReactDOM from 'react-dom';
import Split from '@uiw/react-split';
const Demo = () => (
<Split style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>
<div>
Left Pane
</div>
<div>
Center Pane
</div>
<div>
Center Pane
</div>
<div style={{ flex: 1 }}>
Right Pane
</div>
</Split>
);
ReactDOM.render(<Demo />, _mount_);
import ReactDOM from 'react-dom';
import Split from '@uiw/react-split';
const Demo = () => (
<div>
<Split lineBar style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>
<div>
Left Pane
</div>
<div>
Center Pane
</div>
<div>
Center Pane
</div>
<div style={{ flex: 1 }}>
Right Pane
</div>
</Split>
<Split mode="vertical" lineBar style={{ height: 210, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 10 }}>
<div style={{ height: '33.3%' }}>
Left Pane
</div>
<div style={{ height: '33.3%' }}>
Center Pane
</div>
<div style={{ flex: 1 }}>
Right Pane
</div>
</Split>
</div>
);
ReactDOM.render(<Demo />, _mount_);
import ReactDOM from 'react-dom';
import Split from '@uiw/react-split';
const Demo = () => (
<Split mode="vertical" style={{ height: 200, border: '1px solid #d5d5d5', borderRadius: 3 }}>
<div style={{ height: '50%' }}>
Top Pane
</div>
<div style={{ height: '50%' }}>
Bottom Pane
</div>
</Split>
);
ReactDOM.render(<Demo />, _mount_);
import ReactDOM from 'react-dom';
import Split from '@uiw/react-split';
const Demo = () => (
<Split style={{ height: 200, border: '1px solid #d5d5d5', borderRadius: 3 }}>
<Split mode="vertical">
<div style={{ height: '50%' }}>
Top Pane
</div>
<Split style={{ height: '50%' }}>
<div>
Left Pane
</div>
<div style={{ flex: 1 }}>
Right Pane
</div>
</Split>
</Split>
<div style={{ flex: 1 }}>
Right Pane
</div>
</Split>
);
ReactDOM.render(<Demo />, _mount_);
下面实例通过设置 visiable 的值来设置拖拽工具是否可见
import ReactDOM from 'react-dom';
import Split from '@uiw/react-split';
const Demo = () => (
<div>
<Split visiable={false} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>
<div style={{ maxWidth: 100, backgroundColor: '#eaeaea' }}>
Left Pane
</div>
<div style={{ flex: 1 }}>
Right Pane
</div>
</Split>
<Split visiable={[4, 5]} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 10 }}>
<div style={{ maxWidth: 50, backgroundColor: '#eaeaea' }}>
Pane 1
</div>
<div style={{ maxWidth: 60 }}>
Pane 2
</div>
<div>
Pane 3
</div>
<div>
Pane 4
</div>
<div style={{ flex: 1 }}>
Pane 5
</div>
</Split>
</div>
);
ReactDOM.render(<Demo />, _mount_);
通过设置 disable 的值，禁用拖拽工具拖拽。
import ReactDOM from 'react-dom';
import Split from '@uiw/react-split';
const Demo = () => (
<div>
<Split disable style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>
<div style={{ maxWidth: 100, backgroundColor: '#eaeaea' }}>
Left Pane
</div>
<Split disable mode="vertical">
<div>
Top Pane
</div>
<div>
Bottom Pane
</div>
</Split>
<div style={{ flex: 1 }}>
Right Pane
</div>
</Split>
<Split disable={[4, 5]} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 10 }}>
<div style={{ maxWidth: 50, backgroundColor: '#eaeaea' }}>
Pane 1
</div>
<div style={{ maxWidth: 60 }}>
Pane 2
</div>
<div>
Pane 3
</div>
<div>
Pane 4
</div>
<div style={{ flex: 1 }}>
Pane 5
</div>
</Split>
</div>
);
ReactDOM.render(<Demo />, _mount_);
可拖拽左边栏宽度。
import React from 'react';
import ReactDOM from 'react-dom';
import Split from '@uiw/react-split';
import { Menu, Button } from 'uiw';
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
width: 210,
};
}
onClick() {
this.setState({
width: this.state.width === 0 ? 210 : 0,
});
}
render() {
const styl = {};
if (this.state.width === 0) {
styl.width = `0%`;
} else {
styl.width = this.state.width;
}
return (
<>
<div style={{ marginBottom: 10 }}>
<Button type="primary" onClick={this.onClick.bind(this)}>{this.state.width === 0 ? '隐藏菜单' : '展示菜单'}</Button>
</div>
<Split lineBar visiable={this.state.width !== 0} style={{ border: '1px solid #d5d5d5', borderRadius: 3 }}>
<div style={{ ...styl, overflow: 'hidden' }}>
<Menu>
<Menu.Item icon="heart-on" text="另存为" active />
<Menu.Item icon="appstore" text="应用商城" />
<Menu.Item icon="bar-chart" text="月统计报表导出" />
<Menu.Item icon="setting" text="偏好设置" />
<Menu.Divider />
<Menu.Item icon="map" text="谷歌地图" />
</Menu>
</div>
<div style={{ flex: 1, minWidth: 30 }}>
Right Pane
</div>
</Split>
</>
)
}
}
ReactDOM.render(<Demo />, _mount_);
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| visiable | 设置拖拽的工具条，是否可见 | Boolean/Array | true |
| disable | 设置拖拽的工具条，禁用 | Boolean/Array | - |
| lineBar | 设置拖拽的工具条，为线条样式。 | Boolean | - |
| mode | 类型，可选值为 horizontal 或 vertical | String | horizontal |
| onDragging | 拖拽宽度/高度变化回调函数，宽度或者高度根据 mode 参数来确定 | Function(prePaneSize, nextPaneSize, nextPaneNumber) | - |
| onDragEnd | 拖拽结束的回调函数 | Function(prePaneSize, nextPaneSize, nextPaneNumber) | - |
Runs the project in development mode.
# Step 1, run first, listen to the component compile and output the .js file
npm run ts:watch
# Step 2, listen for compilation output type .d.ts file
npm run types:watch
# Step 3, development mode, listen to compile preview website instance
npm run doc:dev
production
Builds the app for production to the build folder.
npm run released
The build is minified and the filenames include the hashes. Your app is ready to be deployed!
FAQs
A piece of content can be divided into areas that can be dragged to adjust the width or height.
The npm package @uiw/react-split receives a total of 5,475 weekly downloads. As such, @uiw/react-split popularity was classified as popular.
We found that @uiw/react-split demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious PyPI checkers validate stolen emails against TikTok and Instagram APIs, enabling targeted account attacks and dark web credential sales.
Security News
The Node.js TSC opted not to endorse a feature bounty program, citing concerns about incentives, governance, and project neutrality.
Research
Security News
A look at the top trends in how threat actors are weaponizing open source packages to deliver malware and persist across the software supply chain.