可调整大小

PreviousNext

\@platejs/resizable 的 API 参考。

特性

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

安装

pnpm add @platejs/resizable

API

useResizableState

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

OptionsResizableOptions

  • align optional 'center' | 'left' | 'right'

    节点对齐方式。

    • 默认值: 'center'

  • maxWidth optional ResizeLength

    最大宽度约束。

    • 默认值: '100%'

  • minWidth optional ResizeLength

    最小宽度约束。

    • 默认值: 92

  • readOnly optional boolean

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

Returnsobject

Collapse all

  • align 'center' | 'left' | 'right'

    当前对齐设置。

  • maxWidth ResizeLength

    最大宽度约束。

  • minWidth ResizeLength

    最小宽度约束。

  • setNodeWidth (width: number) => void

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

  • setWidth (width: number | string) => void

    更新本地状态中的宽度。

  • width number | string

    当前宽度值。

useResizable

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

Parameters

Collapse all

  • state ReturnType<typeof useResizableState>

    来自 useResizableState 的状态。

Returnsobject

Collapse all

  • context object

  • props object

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

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

  • wrapperProps object

    包装元素的样式属性：

    • position: 'relative'

  • wrapperRef React.RefObject<HTMLDivElement>

    包装元素的引用。

useResizeHandleState

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

OptionsResizeHandleOptions

Collapse all

  • direction optional ResizeDirection

    调整大小的方向。

    • 默认值: 'left'

  • initialSize optional number

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

  • onHover optional () => void

    手柄被悬停时的回调。

  • onHoverEnd optional () => void

    手柄悬停结束时的回调。

  • onMouseDown optional React.MouseEventHandler

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

  • onResize optional (event: ResizeEvent) => void

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

  • onTouchStart optional React.TouchEventHandler

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

Returnsobject

Collapse all

  • direction ResizeDirection

    当前调整大小方向。

  • initialPosition number

    初始光标/触摸位置。

  • initialSize number

    元素初始大小。

  • isHorizontal boolean

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

  • isResizing boolean

    是否正在调整大小。

  • readOnly boolean

    编辑器只读状态。

  • setInitialPosition (position: number) => void

    更新初始位置。

  • setInitialSize (size: number) => void

    更新初始大小。

  • setIsResizing (resizing: boolean) => void

    更新调整大小状态。

  • onHover () => void

    悬停回调。

  • onHoverEnd () => void

    悬停结束回调。

  • onMouseDown React.MouseEventHandler

    鼠标按下处理程序。

  • onResize (event: ResizeEvent) => void

    调整大小处理程序。

  • onTouchStart React.TouchEventHandler

    触摸开始处理程序。

useResizeHandle

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

Parameters

Collapse all

  • state ReturnType<typeof useResizeHandleState>

    来自 useResizeHandleState 的状态。

Returnsobject

Collapse all

  • hidden boolean

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

  • props object

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

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