使用法

  1. import { useState } from 'react';
  2. import { BoxControl } from '@wordpress/components';
  4. function Example() {
  5.    const [ values, setValues ] = useState( {
  6.    top: '50px',
  7.    left: '10%',
  8.    right: '10%',
  9.    bottom: '50px',
  10.    } );
  12.    return (
  13.    <BoxControl
  14.    values={ values }
  15.    onChange={ ( nextValues ) => setValues( nextValues ) }
  16.    />
  17.    );
  18. }

プロパティ

allowReset: boolean

このプロパティがtrueの場合、ボックスコントロールをリセットするためのボタンが表示されます。

  • 必須: いいえ
  • デフォルト: true

splitOnAxis: boolean

このプロパティがtrueの場合、ボックスコントロールがリンク解除されると、個々の側面を更新する代わりに、垂直および水平方向のコントロールを使用できます。

  • 必須: いいえ
  • デフォルト: false

inputProps: object

内部のUnitControlコンポーネントのプロパティ。

  • 必須: いいえ
  • デフォルト: { min: 0 }

label: string

コントロールの見出しラベル。

  • 必須: いいえ
  • デフォルト: ( 'Box Control' )

onChange: (next: BoxControlValue) => void

入力値が変更されたときのコールバック関数。

  • 必須: はい

resetValues: object

コントロールがリセットされたときに使用するtop、right、bottom、およびleftボックスの寸法値。

  • 必須: いいえ
  • デフォルト: { top: undefined, right: undefined, bottom: undefined, left: undefined }

sides: string[]

制御を許可する側面のコレクション。省略または空の場合、すべての側面が利用可能になります。許可される値は「top」、「right」、「bottom」、「left」、「vertical」、および「horizontal」です。

  • 必須: いいえ

units: WPUnitControlUnit[]

UnitControlと互換性のある利用可能な単位のコレクション。

  • 必須: いいえ

values: object

  2. - 必須: いいえ
  3.  <a name="onmouseover-function"></a>
  6. ### onMouseOver: function
  8. onMouseOverイベントのハンドラー。  
  10. - 必須: いいえ
  11.  <a name="onmouseout-function"></a>
  14. ### onMouseOut: function
  16. onMouseOutイベントのハンドラー。  
  18. - 必須: いいえ
  19.  <a name="__next40pxdefaultsize-boolean"></a>
  22. ### __next40pxDefaultSize: boolean
  24. 将来のバージョンでデフォルトサイズになる大きなデフォルトサイズを選択し始めます。  
  26. - 必須: いいえ 
  27. - デフォルト: `````false