此功能仍处于实验阶段。“Experimental”意味着这是早期实现，可能会发生剧烈且破坏性的更改。
NumberControl 是一个增强的 HTML input[type="number"] 元素。
用法
import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
const Example = () => {
const [ value, setValue ] = useState( 10 );
return (
<NumberControl
isShiftStepEnabled={ true }
onChange={ setValue }
shiftStep={ 10 }
value={ value }
/>
);
};
属性
dragDirection
确定用于增加/减少值的拖拽轴。
方向：n | e | s | w
- 类型：
String - 是否必需：否
- 默认值：
n
dragThreshold
如果 isDragEnabled 为 true，则控制值发生变化前需要拖动的 px 数量。
- 类型：
Number - 是否必需：否
- 默认值：
10
spinControls
要显示的微调控件类型。这些是允许用户
快速增加和减少数字的按钮。
- ‘none’ – 不显示微调控件。
- ‘native’ – 使用浏览器的原生 HTML
input控件。 - ‘custom’ – 使用加号和减号图标按钮。
- 类型：
String - 是否必需：否
- 默认值：
'native'
- 类型：
isDragEnabled
如果为 true，则启用鼠标拖拽手势来增加/减少数值。在拖拽时按住 SHIFT 键将使值增加 shiftStep。
- 类型：
Boolean - 是否必需：否
isShiftStepEnabled
如果为 true，按下 UP 或 DOWN 键并同时按住 SHIFT 键将使值增加 shiftStep 的值。
- 类型：
Boolean - 是否必需：否
- 默认值：
true
label
如果添加了此属性，将使用 label 属性的内容生成标签。
- 类型：
String - 是否必需：否
labelPosition
标签的位置（top、side、bottom 或 edge）。
- 类型：
String - 是否必需：否
max
允许的 value 最大值。
- 类型：
Number - 是否必需：否
- 默认值：
Infinity
min
允许的 value 最小值。
- 类型：
Number - 是否必需：否
- 默认值：
-Infinity
onChange
每当输入值发生变化时触发的回调函数。
该回调函数接收两个参数：
newValue：输入的的新值extra：一个对象，其中在event键下包含原始浏览器事件。
请注意，作为回调函数第一个参数接收到的值不一定是有效值（例如，它可能超出 [min, max] 属性定义的范围，或者可能与 step 不匹配）。为了检查值的有效性，请检查回调函数第二个参数中的 event.target?.validity.valid 属性。
- 类型：
(newValue, extra) => void - 是否必需：否
required
如果为 true，则强制控件的最小/最大范围内的有效数字。如果为 false，则允许空字符串作为有效值。
- 类型：
Boolean - 是否必需：否
- 默认值：
false
shiftStep
按住 SHIFT 键时的增量。此移位值是 step 值的倍数。例如，如果 step 值为 5，且 shiftStep 为 10，则每次跳跃将增加/减少 50。
- 类型：
Number - 是否必需：否
- 默认值：
10
step
增加/减少时 value 的变化量。它也是验证的一个因素，因为 value 必须是 step 的倍数（如果指定了 min，则减去偏移量）才能被视为有效。接受特殊字符串值 any，该值会取消验证约束，并导致步进操作按 1 增加/减少。
- 类型：
Number | "any" - 是否必需：否
- 默认值：
1