用于设置边框颜色、样式和宽度的输入控件。
开发指南
BorderControl 整合了内部子组件，允许用户
设置边框的各种属性。第一个子组件 BorderDropdown 包含代表边框颜色和样式的选项。
边框宽度通过 UnitControl 和一个可选的 RangeControl 进行控制。
此控件不涵盖圆角半径（border radius），因为它可能希望与
颜色、样式和宽度分开处理。例如，圆角半径可以归入
“形状”抽象概念中。
用法
import { useState } from 'react';
import { BorderControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
const colors = [
{ name: 'Blue 20', color: '#72aee6' },
// ...
];
const MyBorderControl = () => {
const [ border, setBorder ] = useState();
return (
<BorderControl
colors={ colors }
label={ __( 'Border' ) }
onChange={ setBorder }
value={ border }
/>
);
};
如果您在编辑器外部使用此组件，您可以
确保 Tooltip 的定位
以适配 BorderControl 的颜色和样式选项，方法是在元素树更上层渲染您的BorderControl 并配合 Popover.Slot，且整体处于SlotFillProvider 之中。
Props
colors: ( PaletteObject | ColorObject )[]
颜色定义数组。这也可以是一个多维数组，其中
颜色按多个来源组织。
每个颜色可以是一个包含 name 和 color 值的对象。
- 必填：否
- 默认值：
[]
disableCustomColors: boolean
此属性切换选择自定义颜色的能力。
- 必填：否
disableUnits: boolean
此属性控制是否禁用单位选择。
- 必填：否
enableAlpha: boolean
此属性控制在选择自定义颜色时是否提供 alpha 通道。
- 必填：否
- 默认值：
true
enableStyle: boolean
此属性控制是否支持边框样式选择。
- 必填：否
- 默认值：
true
hideLabelFromVision: boolean
提供对标签是否仅对屏幕阅读器可见的控制。
- 必填：否
isCompact: boolean
此标志指示 BorderControl 以更紧凑的外观渲染。它
限制控件的宽度，防止其扩展以占用
额外空间。
- 必填：否
label: string
如果提供，将使用此内容生成标签。
标签是否仅对屏幕阅读器可见由 hideLabelFromVision 控制。
- 必填：否
onChange: ( value?: Object ) => void
当通过交互操作选择或清除边框颜色、样式或宽度从而更改边框值时调用的回调函数。
注意：如果用户清除了所有边框属性，该值可能为 undefined。
- 必填：是
shouldSanitizeBorder: boolean
如果启用，对边框进行清理意味着如果没有选择宽度或颜色，则边框样式也会被清除，并且返回 undefined 作为新的边框值。
- 必填：否
- 默认值：
true
value: Object
表示边框的对象或 undefined。用于设置此组件的当前边框
配置。
示例：
{
color: '#72aee6',
style: 'solid',
width: '2px,
}
- 必填：否
width: CSSProperties[ ‘width’ ]
控制 BorderControl 的视觉宽度。如果 isCompact prop 设置为 true，则此属性无效。
- 必填：否
withSlider: boolean
标志此 BorderControl 是否还应渲染一个 RangeControl，以便
进一步控制边框宽度。
- 必填：否