可调整大小的框

ResizableBox 是 re-resizable 包 的封装，带有预定义的类和样式。

用法

大多数选项直接传递给 re-resizable，因此您可能需要参考其文档。此组件的主要区别在于我们设置了 handleClasses（使用自定义类名）并向 handleStyles 传递了一些 null 值（以取消设置一些内联样式）。

下面的示例展示了如何在区块的 edit 组件中使用 ResizableBox 来设置宽度和高度。

import { ResizableBox } from '@wordpress/components';

const Edit = ( props ) => {
    const {
        attributes: { height, width },
        setAttributes,
        toggleSelection,
    } = props;

    return (
        <ResizableBox
            size={ {
                height,
                width,
            } }
            minHeight="50"
            minWidth="50"
            enable={ {
                top: false,
                right: true,
                bottom: true,
                left: false,
                topRight: false,
                bottomRight: true,
                bottomLeft: false,
                topLeft: false,
            } }
            onResizeStop={ ( event, direction, elt, delta ) => {
                setAttributes( {
                    height: height + delta.height,
                    width: width + delta.width,
                } );
                toggleSelection( true );
            } }
            onResizeStart={ () => {
                toggleSelection( false );
            } }
        />
    );
};

属性

有关其他属性，请查看 re-resizable。