react使用react-split-pane分割面板

目录

react使用react-split-pane分割面板

  • 安装:npm i react-split-pane

code.jsx

js 复制代码
import React, { useState, useEffect } from "react";
import StyleDeptId from "styled-components";
import SplitPane from 'react-split-pane';
import "./splitSpane.scss";
import SearchDept from "./searchDept"
export default function Dept(props) {
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    // init();
  }, []);

  return (
    <DeptWrap className="wrap">
      {/* <Spin
        spinning={loading}
        style={{
          width: '100%',
          height: "100%",
        }}
      ></Spin> */}
      <SplitPane split="vertical" minSize={200} defaultSize={200}>
        <div className="left">
          <SearchDept></SearchDept>
        </div>
        <div className="right">right</div>
      </SplitPane>
    </DeptWrap>
  );
}

const DeptWrap = StyleDeptId.div`
display: flex;
height: 100%;
background: #ccc;
position: relative;
.left {
  background: pink;
  height: 100%;
}
.right {
  background: orange;
  height: 100%;
}
`;

splitSpane.scss

js 复制代码
// react-split-pane的样式必须要
.Resizer {
  background: #000;
  opacity: 0.2;
  z-index: 1;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}

.Resizer:hover {
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
}

.Resizer.horizontal {
  height: 11px;
  margin: -5px 0;
  border-top: 5px solid rgba(255, 255, 255, 0);
  border-bottom: 5px solid rgba(255, 255, 255, 0);
  cursor: row-resize;
  width: 100%;
}

.Resizer.horizontal:hover {
  border-top: 5px solid rgba(0, 0, 0, 0.5);
  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
}

.Resizer.vertical {
  width: 11px;
  margin: 0 -5px;
  border-left: 5px solid rgba(255, 255, 255, 0);
  border-right: 5px solid rgba(255, 255, 255, 0);
  cursor: col-resize;
}

.Resizer.vertical:hover {
  border-left: 5px solid rgba(0, 0, 0, 0.5);
  border-right: 5px solid rgba(0, 0, 0, 0.5);
}
.Resizer.disabled {
  cursor: not-allowed;
}
.Resizer.disabled:hover {
  border-color: transparent;
}
相关推荐
小毛驴8509 分钟前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
码间舞2 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce3 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
JSON_L4 小时前
Vue 电影导航组件
前端·javascript·vue.js
爱编程的喵5 小时前
深入理解JSX:从语法糖到React的魔法转换
前端·react.js
xptwop5 小时前
05-ES6
前端·javascript·es6