Resizable

API reference for @udecode/plate-resizable

特性

  • 带有手柄的可调整大小的元素
  • 可配置的最小/最大宽度约束
  • 支持居中/左/右对齐
  • 在编辑器状态中保持宽度

安装

npm install @udecode/plate-resizable

API

useResizableState

管理可调整大小元素的状态。

Parameters

Collapse all

Returns

Collapse all

    当前对齐设置。

    最大宽度约束。

    最小宽度约束。

    在编辑器状态中更新节点宽度。

    在本地状态中更新宽度。

    当前宽度值。

useResizable

为可调整大小的元素提供调整大小行为的 props 和处理程序。

Parameters

Collapse all

    来自 useResizableState 的状态。

Returns

Collapse all

    可调整大小元素的样式属性：

    • maxWidth: 最大宽度约束
    • minWidth: 最小宽度约束
    • position: 'relative'
    • width: 当前宽度

    包装器元素的样式属性：

    • position: 'relative'

    包装器元素的引用。

useResizeHandleState

管理调整大小手柄元素的状态。

Parameters

Collapse all

Returns

Collapse all

    当前调整大小的方向。

    初始光标/触摸位置。

    元素的初始大小。

    调整大小的方向是否为水平。

    是否正在调整大小。

    编辑器只读状态。

    更新初始位置。

    更新初始大小。

    更新调整大小状态。

    悬停回调。

    悬停结束回调。

    鼠标按下处理程序。

    调整大小处理程序。

    触摸开始处理程序。

useResizeHandle

为调整大小的句柄元素提供处理程序和 props。

Parameters

Collapse all

    来自 useResizeHandleState 的状态。

Returns

Collapse all

    句柄是否应该隐藏（在只读模式下）。

    要传递给句柄元素的 props：

    • onMouseDown: 鼠标按下事件处理程序
    • onMouseOut: 鼠标移出事件处理程序
    • onMouseOver: 鼠标悬停事件处理程序
    • onTouchEnd: 触摸结束事件处理程序
    • onTouchMove: 触摸移动事件处理程序
    • onTouchStart: 触摸开始事件处理程序
Floating