Skip to content

Latest commit

 

History

History
105 lines (82 loc) · 3.47 KB

中文文档.md

File metadata and controls

105 lines (82 loc) · 3.47 KB
Raw

split-pane-react

拆分面板组件，基于 React.js.查看 实时demo. 不同 主题demo.

特征

  • 简单的api 并且支持多面板.
  • 支持 横向&竖向布局 和 流体布局.
  • 使用 受控组件 模式, 使用灵活方便.
  • 支持 React16.8 到 React18版本，因为使用了React Hooks.
  • 支持方便灵活的 滑轴定制.

安装

# use npm
npm install split-pane-react

# or if you use yarn
yarn add split-pane-react

使用样例

  import React, { useState } from 'react';
  import SplitPane, { Pane } from 'split-pane-react';
  import 'split-pane-react/esm/themes/default.css';

  function style (color) {
    return {
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: color
    };
  }

  function App () {
    const [sizes, setSizes] = useState([100, '30%', 'auto']);

    return (
      <div style={{ height: 500 }}>
        <SplitPane
          split='vertical'
          sizes={sizes}
          onChange={setSizes}
        >
          <Pane minSize={50} maxSize='50%'>
            <div style={style('#ddd')}>
              pane1
            </div>
          </Pane>
          <div style={style('#ccc')}>
            pane2
          </div>
          <div style={style('#eee')}>
            pane3
          </div>
        </SplitPane>
      </div>
    );
  };

属性

** SplitPane **

Property Description Type Default
split 布局方式，支持水平和竖直两种. 'vertical' |'horizontal' 'vertical'
sizes 每个面板尺寸，因为是受控组件模式，所以该属性必传 (string | number)[] []
resizerSize 指定滑轴的尺寸（宽度） number 4
allowResize 面板尺寸是否支持调整，设置为false后，滑轴将不能滑动 boolean true
className 自定义className string void
sashRender 自定义滑轴样式函数 (index: number, active: boolean) => void void
performanceMode 开启高性能模式，将实时更新尺寸改为滑动完成后更新，避免页面频繁重排 boolean false
onChange 尺寸改变时的回调函数 (sizes: number[]) => void void
onDragStart 拖拽开始时的回调函数 () => void void
onDragEnd 拖拽结束时的回调函数 () => void void

** Pane **

Property Description Type Default
className 面板 className string void
minSize 限制面板的最小尺寸 string | number void
maxSize 限制面板的最大尺寸 string|number void

themes

可以通过sashRender参数，定制需要的主题:

  • 默认的主题是参考的vscode主题
  • 同时也内置了一套sublime风格的主题
  • 自定义 主题demos.

License

split-pane-react 使用 MIT许可.

PS: 如果您有任何使用问题，可以提一个issue，我将尽快修复。这个组件会长期维护，同样的，如果你有什么好的想法，也欢迎提merge。如果这个组件对你有帮助，请留下你的Star，以便于需要它的开发者更容易搜索到它。