分块

Splitter 是一个 React 组件,允许您将视图分割成可重现面板 。 例如,类似于Visual Studio代码中的分页. 这是你和Splitter一起建造的东西:

分裂器的灵感来自 分开 并写入100%的函数组件 :

• 所有大小计算都通过 CSS 进行 calc 与最低联署材料。 这样就快多了
• 完全响应
• 除React外没有依赖关系
• 关于你的风格和观点的最小假设

密码箱项目

安装

npm install @devbookhq/splitter
# or
yarn add @devbookhq/splitter

使用量

水平分割

import Splitter, { SplitDirection } from '@devbookhq/splitter'

function MyComponent() {
  return (
    <Splitter>
      <div>Tile 1</div>
      <div>Tile 2</div>
    </Splitter>
  );
}

垂直分割

import Splitter, { SplitDirection } from '@devbookhq/splitter'

function MyComponent() {
  return (
    <Splitter direction={SplitDirection.Vertical}>
      <div>Tile 1</div>
      <div>Tile 2</div>
    </Splitter>
  );
}

薄膜分拆

import Splitter, { SplitDirection } from '@devbookhq/splitter'

function MyComponent() {
  return (
    <Splitter direction={SplitDirection.Vertical}>
      <div>Tile 1</div>
      <Splitter direction={SplitDirection.Horizontal}>
        <div>Tile 2</div>
        <Splitter direction={SplitDirection.Vertical}>
          <div>Tile 3</div>
          <div>Tile 4</div>
        </Splitter>
      </Splitter>
    </Splitter>
  );
}

获得牌的大小

import Splitter, { SplitDirection } from '@devbookhq/splitter'

function MyComponent() {
  function handleResizeStarted(gutterIdx: number) {
    console.log('Resize started!', gutterIdx);
  }
  function handleResizeFinished(gutterIdx: number, newSizes: number[]) {
    console.log('Resize finished!', gutterIdx, newSizes);
  }

  return (
    <Splitter
      direction={SplitDirection.Vertical}
      onResizeStarted={handleResizeStarted}
      onResizeFinished={handleResizeFinished}
    >
      <div>Tile 1</div>
      <div>Tile 2</div>
    </Splitter>
  );
}

来看看更多例子 实例 节.

实例

检查 example 文件夹或文件夹 密码箱项目。 。 。 .

• 水平
• 垂直
• 嵌入
• 样式地沟
• 最小瓦片大小
• 初始瓦片大小
• 可滚动瓦片
• 获得牌的大小