此功能仍处于实验阶段。“实验性”意味着这是早期实现，可能会发生重大且破坏性的变更。
UnitControl 允许用户设置数值以及单位（例如 px）。
用法
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。启用后，在通过 Tab 键切换焦点时（onBlur）也会触发更改。
- 必需：否
- 默认值：
false
isResetValueOnUnitChange: boolean
如果为 true，且所选单位提供了 default 值，则在更改单位时会设置该值。
- 必需：否
- 默认值：
false
isUnitSelectTabbable: boolean
确定单位 <select> 是否可以通过 Tab 键聚焦。
- 必需：否
- 默认值：
true
label: string
如果添加了此属性，将使用 label 属性的内容生成标签。
- 必需：否
labelPosition: string
标签的位置（top、side、bottom 或 edge）。
- 必需：否
onBlur: FocusEventHandler< HTMLInputElement | HTMLSelectElement >
当数量或单位输入框触发 blur 事件时调用的回调函数。
- 必需：否
onFocus: FocusEventHandler< HTMLInputElement | HTMLSelectElement >
当数量或单位输入框触发 focus 事件时调用的回调函数。
- 必需：否
onChange: UnitControlOnChangeCallback
当 value 发生变化时的回调函数。
- 必需：否
onUnitChange: UnitControlOnChangeCallback
当 unit 发生变化时的回调函数。
- 必需：否
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 } />
);
};
如果定义了 default 值（在上述示例中，% 的值为 10），则在更改单位时会将其设置为新的 value。这在某些场景下非常有用，例如从 px 更改为 vh 时可能会导致结果发生巨大变化。
value: number | string
当前值。如果以字符串形式传递，将根据该值推断当前单位。
例如，value 为 50% 会将当前单位设置为 %。
示例：
<UnitControl value="50%" />
- 必需：否