DimensionControl 是一个旨在提供用于控制间距和/或尺寸的 UI 的组件。
用法
import { useState } from 'react';
import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
export default function MyCustomDimensionControl() {
const [ paddingSize, setPaddingSize ] = useState( '' );
return (
<DimensionControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label={ 'Padding' }
icon={ 'desktop' }
onChange={ ( value ) => setPaddingSize( value ) }
value={ paddingSize }
/>
);
}
注意：默认情况下，如果您未为当前尺寸值提供初始 value prop，则不会选择任何值（即：没有设置默认尺寸）。
属性
label
- 类型：
string - 必需：是
控件的可读标签。
value
- 类型：
string - 必需：否
尺寸 UI 控件的当前值。如果提供，UI 将自动选择该值。
sizes
- 类型：
{ name: string; slug: string }[] - 默认值：请参阅
packages/block-editor/src/components/dimension-control/sizes.ts - 必需：否
一个可选的大小对象数组，结构如下：
[
{
name: __( 'Small' ),
slug: 'small',
},
{
name: __( 'Medium' ),
slug: 'small',
},
// ...etc
]
默认情况下，提供一组相对尺寸（small、medium 等）。请参阅 packages/block-editor/src/components/dimension-control/sizes.js。
icon
- 类型：
string - 必需：否
在控件标签前显示的可选 dashicon。
onChange
- 类型：
( value?: string ) => void; - 必需：否
- 参数：:
size– 表示所选大小的字符串（例如：medium）
当间距大小值发生变化（被选中/点击）时触发的回调函数。
className
- 类型：
string - 默认值：
'' - 必需：否
要添加到控件组件的类名字符串。
__next40pxDefaultSize
- 类型：
Boolean - 必需：否
- 默认值：
false
开始采用将在未来版本中成为默认尺寸的较大默认高度。
__nextHasNoMarginBottom
- 类型：
Boolean - 必需：否
- 默认值：
false
开始采用将在未来版本中成为默认的无边距样式。