re-flex

关于 Re-F|ex

Re-F|ex 是一个基于 React flex 的布局组件库，我创建它是因为我找不到能满足我需求的组件。

它旨在以简单的方式满足需要可调整大小布局的高级 React Web 应用程序的需求。

以下是一个基本演示：

import ReactDOM from 'react-dom'
import React from 'react'

import {
  ReflexContainer,
  ReflexSplitter,
  ReflexElement
} from 'react-reflex'

import 'react-reflex/styles.css'

/////////////////////////////////////////////////////////
// 带分隔条的基本垂直 re-flex 布局
// 在两个 ReflexElements 之间添加分隔条
// 将允许用户调整它们的大小
//
/////////////////////////////////////////////////////////
class ReflexDemo extends React.Component {

  render () {

    return (
      <ReflexContainer orientation="vertical">

        <ReflexElement className="left-pane">
          <div className="pane-content">
            左侧面板（可调整大小）
          </div>
        </ReflexElement>

        <ReflexSplitter/>

        <ReflexElement className="right-pane">
          <div className="pane-content">
            右侧面板（可调整大小）
          </div>
        </ReflexElement>

      </ReflexContainer>
    )
  }
}

ReactDOM.render(
  <ReflexDemo/>,
  document.getElementById('reflex-demo'))

安装

npm install react-reflex

每个发行版都提供 ES6、CommonJS 和 UMD 构建版本。

// 你需要单独导入样式
// 你可能只想在应用程序的引导阶段执行一次此操作。
import 'react-reflex/styles.css'

// 然后你可以导入组件
import {
  ReflexContainer,
  ReflexSplitter,
  ReflexElement
} from 'react-reflex'

你也可以使用 UMD 构建

<link rel="stylesheet" href="path-to-react-reflex/styles.css">
<script src="path-to-react-reflex/dist/umd/react-reflex.min.js"></script>

React 支持

React >= 0.13.x

浏览器支持

Re-F|ex 是响应式的，移动设备友好的，并已在以下浏览器上进行了测试：


IE 11+ ✔	最新版本 ✔	最新版本 ✔	最新版本 ✔	最新版本 ✔	最新版本 ✔

文档和示例

Re-F|ex 是目前最强大的可调整大小的 React 布局组件...不要只相信我说的，自己试试看！

点击这里查看代码示例和在线演示...

re-flex-demo

ReflexContainer 支持的属性：
- orientation：布局容器的方向。类型：oneOf(['horizontal', 'vertical'])。默认值：horizontal。
- maxRecDepth：基于用户提供的值解决布局元素初始弹性的最大递归深度。这可以防止在约束求解器无法找到合适的元素尺寸以满足初始输入时出现无限递归。类型：number。默认值：100。
windowResizeAware：当设置为true时，此标志将在窗口调整大小事件时更新布局，以尝试满足每个元素的minSize/maxSize约束。如果您的元素没有这些约束，则不需要此设置。类型：bool。默认值：false。
className：用空格分隔的类名，用于在组件上应用自定义样式。类型：string。默认值：空字符串 ''。
style：允许向容器传递内联样式。类型：object。默认值：{}。
ReflexElement支持的属性：
- propagateDimensions：将此设置为true将向子元素传播{height, width}尺寸属性。更多详情请参见尺寸感知元素演示。类型：bool。默认值：false。
- propagateDimensionsRate：当使用propagateDimensions={true}进行调整大小时，定义子元素上尺寸更新的频率（每秒次数）。这可以通过在调整大小期间跳过一些重新渲染步骤，来帮助改善在重型组件上使用此方法时的性能。类型：number。默认值：100。
- resizeHeight：允许控制当propagateDimensions={true}时是否传播height。类型：bool。默认值：true。
- resizeWidth：允许控制当propagateDimensions={true}时是否传播width。类型：bool。默认值：true。
- size：允许以像素为单位控制元素的大小。主要用例是允许以编程方式对元素执行动画（收缩/扩展）。更多详情请参见受控元素演示。类型：number。默认值：true。
- minSize：为用户可调整元素的最小尺寸（以像素为单位）创建约束。类型：number。默认值：true。
- maxSize：为用户可调整元素的最大尺寸（以像素为单位）创建约束。类型：number。默认值：true。
- flex：指定元素的初始flex值。默认情况下，所有元素将在布局内均匀显示，除非其中一些指定了minSize、maxSize或size。类型：number。默认值：true。
- direction：允许控制元素在修改其size属性时将在哪个方向（或多个方向）收缩/扩展。更多详情请参见受控元素演示。类型：-1, 1 或 [-1, 1]。默认值：1。
- onStartResize：用户开始调整布局大小时触发的事件。类型：function({domElement, component})。默认值：undefined。
- onStopResize：用户完成布局大小调整时触发的事件。类型：function({domElement, component})。默认值：undefined。
- onResize：用户调整布局大小时每个调整步骤触发的事件。类型：function({domElement, component})。默认值：undefined。
- className：用空格分隔的类名，用于在组件上应用自定义样式。类型：string。默认值：空字符串 ''。
- style：允许向容器传递内联样式。类型：object。默认值：{}。
ReflexSplitter支持的属性：
- propagate：在调整布局大小时跨多个分隔符传播拖动。布局必须至少有3个元素，因此有2个分隔符，此属性才相关。类型：bool。默认值：false。
- onStartResize：用户开始调整布局大小时触发的事件。类型：function({domElement, component})。默认值：undefined。
- onStopResize：用户完成布局大小调整时触发的事件。类型：function({domElement, component})。默认值：undefined。
- onResize：用户调整布局大小时每个调整步骤触发的事件。类型：function({domElement, component})。默认值：undefined。
- className：用空格分隔的类名，用于在组件上应用自定义样式。类型：string。默认值：空字符串 ''。
- style：允许向容器传递内联样式。默认值：{}。类型：object。