可调整大小

PreviousNext

\@platejs/resizable 的 API 参考。

特性

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

安装

pnpm add @platejs/resizable

API

useResizableState

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

OptionsResizableOptions

Collapse all

    节点对齐方式。

    • 默认值: 'center'

    最大宽度约束。

    • 默认值: '100%'

    最小宽度约束。

    • 默认值: 92

    元素在只读模式下是否可调整大小。

Returnsobject

Collapse all

    当前对齐设置。

    最大宽度约束。

    最小宽度约束。

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

    更新本地状态中的宽度。

    当前宽度值。

useResizable

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

Parameters

Collapse all

    来自 useResizableState 的状态。

Returnsobject

Collapse all

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

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

    包装元素的样式属性：

    • position: 'relative'

    包装元素的引用。

useResizeHandleState

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

OptionsResizeHandleOptions

Collapse all

    调整大小的方向。

    • 默认值: 'left'

    可调整大小元素的初始大小。

    手柄被悬停时的回调。

    手柄悬停结束时的回调。

    自定义鼠标按下处理程序。

    自定义调整大小处理程序。如果未提供，则回退到存储处理程序。

    自定义触摸开始处理程序。

Returnsobject

Collapse all

    当前调整大小方向。

    初始光标/触摸位置。

    元素初始大小。

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

    是否正在调整大小。

    编辑器只读状态。

    更新初始位置。

    更新初始大小。

    更新调整大小状态。

    悬停回调。

    悬停结束回调。

    鼠标按下处理程序。

    调整大小处理程序。

    触摸开始处理程序。

useResizeHandle

为调整大小手柄元素提供处理程序和属性。

Parameters

Collapse all

    来自 useResizeHandleState 的状态。

Returnsobject

Collapse all

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

    要应用到手柄元素的属性：

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