react-resizable

React-Resizable

一个可通过一个或多个手柄调整大小的简单组件。

你可以直接使用 <Resizable> 元素，也可以使用更简单的 <ResizableBox> 元素。

有关更多详细信息，请参阅 ExampleLayout 和 ResizableBox 中的示例及相关代码。

目录

• 安装
• TypeScript
• 兼容性
• 用法
  • Resizable
  • ResizableBox
• 属性
• 提取样式
• 自定义调整大小手柄

安装

$ npm install --save react-resizable

提取样式

你必须在应用中包含相关样式，否则调整大小的手柄将不可见且无法正常工作。

// In your JS/TS entry point:
import 'react-resizable/css/styles.css';

或者在你的 CSS 中导入它：

@import 'react-resizable/css/styles.css';

如果你使用的打包器不支持 CSS 导入，可以在 node_modules/React-resizable/css/styles.css 找到这些样式并手动引入。

TypeScript

从 4.0.0 版本开始，该库使用 TypeScript 编写，并随附打包的类型声明文件，位于 build/*.d.ts。你不需要安装 @types/React-resizable；如果你之前安装过，请将其移除，以便打包的类型声明优先生效：

npm uninstall @types/react-resizable
# or
yarn remove @types/react-resizable

公共类型从包根目录重新导出：

import {
  Resizable,
  ResizableBox,
  // types
  type ResizeCallbackData,
  type ResizeHandleAxis,
  type Axis,
  type Props as ResizableProps,
} from 'react-resizable';

Flow

从 4.0.0 开始, Flow 不再受支持。早期版本中包含了从带有 Flow 注解的源代码生成的 *.js.flow 附件文件;这些文件已被删除。

View the Demo