UnitControl

使用法

import { useState } from 'react';
import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
const Example = () => {
   const [ value, setValue ] = useState( '10px' );
   return <UnitControl onChange={ setValue } value={ value } />;
};

プロパティ

disableUnits: boolean

trueの場合、単位<select>は非表示になります。

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

isPressEnterToChange: boolean

もしtrueの場合、ENTERキーの押下がonChangeをトリガーするために必要です。有効にすると、タブキーで移動したときにも変更がトリガーされます（onBlur）。

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

isResetValueOnUnitChange: boolean

もしtrueの場合、選択された単位がdefaultの値を提供する場合、この値は単位を変更するときに設定されます。

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

isUnitSelectTabbable: boolean

単位<select>がタブ可能かどうかを決定します。

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

label: string

このプロパティが追加されると、labelプロパティをコンテンツとして使用してラベルが生成されます。

• 必須: いいえ
  

labelPosition: string

ラベルの位置（top、side、bottom、またはedge）。

• 必須: いいえ
  

onBlur: FocusEventHandler< HTMLInputElement | HTMLSelectElement >

数量または単位入力がblurイベントを発火したときに呼び出されるコールバック。

• 必須: いいえ
  

onFocus: FocusEventHandler< HTMLInputElement | HTMLSelectElement >

数量または単位入力がfocusイベントを発火したときに呼び出されるコールバック。

• 必須: いいえ
  

onChange: UnitControlOnChangeCallback

- 必須: いいえ
 <a name="onunitchange-unitcontrolonchangecallback"></a>
### onUnitChange: UnitControlOnChangeCallback
`````unit`````が変更されたときのコールバック。  
- 必須: いいえ
 <a name="size-string"></a>
### size: string
入力のサイズを調整します。  
 サイズには、`````default`````、`````small`````が含まれます。  
- 必須: いいえ 
- デフォルト: `````default

unit: string

非推奨: 現在の単位値。

代わりに、valueプロパティを通じて値を持つ単位を提供してください。

例:

<UnitControl value="50%" />

• 必須: いいえ
  

units: WPUnitControlUnit[]

利用可能な単位のコレクション。

• 必須: いいえ

例:

import { useState } from 'react';
import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
const Example = () => {
   const [ value, setValue ] = useState( '10px' );
   const units = [
   { value: 'px', label: 'px', default: 0 },
   { value: '%', label: '%', default: 10 },
   { value: 'em', label: 'em', default: 0 },
   ];
   return (
   <UnitControl onChange={ setValue } value={ value } units={ units } />
   );
};

 <a name="value-number-string"></a>
### value: number | string
現在の値。文字列として渡された場合、この値から現在の単位が推測されます。  
 例えば、`````value`````が`````50%`````の場合、現在の単位は`````%`````に設定されます。  
例:  
``````bash
<UnitControl value="50%" />
`

• 必須: いいえ
  

__next40pxDefaultSize: boolean

将来のバージョンでデフォルトサイズになる大きなデフォルト高さを選択し始めます。

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