react实现一个可拖动边框大小的面板效果-html代码-BFW代码库

react实现一个可拖动边框大小的面板效果

代码语言：html

代码描述：react实现一个可拖动边框大小的面板效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url('https://fonts.googleapis.com/css?family=Ubuntu');

html {
  background: #333;
  font-family: sans-serif;
}
h1 {
  color: white;
}

.panel-container {
  display: flex;
  min-height: 300px;
}

.panel {
  background: white;
  border: 1px solid gray;
  padding: 15px;
}
.panel:first-child {

}

.resizer {
  width: 8px;
  background: darkGray;
  position: relative;
  cursor: col-resize;
  flex-shrink: 0;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */ 
}

.resizer::after,
.resizer::before {
  content: "";
  border-left: 1px solid #333;
  position: absolute;
  top: 50%;
  transform: translateY(-100%);
  right: 0;
  display: inline-block;
  height: 20px;
  margin: 0 2px;
}
.resizer::before {
  left: 0;
}
</style>

</head>
<body translate="no">
<div id="app"></div>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react.dev.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-dom.dev.js"></script>
<script>
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}class Application extends React.Component {
  constructor() {
    super();
    this.state = {};


  }

  render() {
    return (
      React.createElement("div", null,
      React.createElement("h1", null, "ReactJS Resizable Panels"),
      React.createElement(ResizablePanels, null,
      React.createElement("div", null, "This is the first panel. It will use the rest of the available space."),


      React.createElement("div", null, "This is the second panel. Starts with 300px."),


      React.createElement("div", null, "This is the third panel. Starts with 300px."))));





  }}


class ResizablePanels extends React.Component {


  constructor() {
    super();_defineProperty(this, "ev.........完整代码请登录后点击上方下载按钮下载查看