请参阅 WordPress Storybook 以获取更详细、交互式的文档。

一个允许用户设置上、右、下、左值的控件。可用作 padding 或 margin 等值的输入控件。

import { useState } from 'react';
import { BoxControl } from '@wordpress/components';

function Example() {
  const [ values, setValues ] = useState( {
    top: '50px',
    left: '10%',
    right: '10%',
    bottom: '50px',
  } );

  return (
    <BoxControl values={ values } onChange={ setValues } />
  );
};

Props

allowReset

  • Type: boolean
  • Required: No
  • Default: true

如果此属性为 true，则渲染一个重置框控件的按钮。

id

  • Type: string
  • Required: No

用作控件唯一 HTML id 属性基础的值。

inputProps

  • Type: UnitControlPassthroughProps
  • Required: No
  • Default: {
    min: 0,
    }

内部 UnitControl 组件的属性。

label

  • Type: string
  • Required: No
  • Default: __( 'Box Control' )

控件的标题标签。

onChange

  • Type: (next: BoxControlValue) => void
  • Required: No
  • Default: () => {}

当输入值更改时的回调函数。

presets

  • Type: Preset[]
  • Required: No

可供选择使用的预设。

presetKey

  • Type: string
  • Required: No

要应用的预设的键。
如果您提供了一组预设，则必须提供一个预设键来使用。
所选预设值的格式将为 var:preset|${ presetKey }|${ presetSlug }

resetValues

  • Type: BoxControlValue
  • Required: No
  • Default: {
    top: undefined,
    right: undefined,
    bottom: undefined,
    left: undefined,
    }

当控件重置时使用的 top、right、bottom 和 left 框尺寸值。

sides

  • Type: readonly (keyof BoxControlValue | "horizontal" | "vertical")[]
  • Required: No

允许控制的边集合。如果省略或为空，则所有边均可用。

允许的值是 “top”、“right”、“bottom”、“left”、“vertical” 和 “horizontal”。

splitOnAxis

  • Type: boolean
  • Required: No
  • Default: false

如果此属性为 true，当框控件解除链接时，可以使用垂直和水平控件，而不是单独更新各个边。

units

  • Type: WPUnitControlUnit[]
  • Required: No
  • Default: CSS_UNITS

可供选择的单位。

values

  • Type: BoxControlValue
  • Required: No

控件的当前值，表示为包含 top、right、bottom 和 left 值的对象。