边框控件

此功能仍处于实验阶段。“实验性”意味着这是一个早期的实施,可能会发生重大的突破性变化。

此组件提供对边框颜色、样式和宽度的控制。

发展指南

这个边框控件将允许用户
设置边框的各种属性。第一个子组件,a
边框下拉列表包含表示边框颜色和样式的选项。这个
边框宽度通过单位控制和可选的RangeControl(范围控制).

此控件不包括边界半径,因为可能需要将其与
颜色、样式和宽度。例如,边界半径可能在
“形状”抽象。

用法

从“react”导入{useState};从“@wordpress/components”导入{__terialBorderControl作为BorderControl};从'@wordpress/i18n'导入{__};常量颜色=[{名称:'Blue 20',颜色:'#72aee6'},// ...];const MyBorderControl=()=>{const[border,setBorder]=使用状态();返回(<边框控件colors={colors}label={__('边框')}onChange={setBorder}值={border}/>);};

如果在编辑器外使用此组件,则可以
确保工具提示定位
对于边框控件的颜色和样式选项,通过渲染
边框控件用一个波波头。狭槽在元素树的上一级
插槽填充提供程序总体而言。

道具

颜色:(PaletteObject|ColorObject)[]

颜色定义数组。这也可能是一个多维数组,其中
颜色由多个来源组织。

每种颜色都可以是包含名称颜色值。

  • 必需:否
  • 违约:[]

disableCustomColors:布尔值

这将切换选择自定义颜色的功能。

  • 必需:否

disableUnits:布尔

这控制是否应禁用单位选择。

  • 必需:否

enableAlpha:布尔

这控制在选择时是否提供alpha通道
自定义颜色。

  • 必需:否
  • 违约:

enableStyle:布尔

这控制是否支持边框样式选择。

  • 必需:否
  • 违约:真的

hideLabelFromVision:布尔值

控制标签是否仅对屏幕阅读器可见。

  • 必需:否

isCompact:布尔值

这将标记边框控件以更紧凑的外观渲染。
限制控件的宽度并防止其扩展到占用
额外的空间。

  • 必需:否

标签:字符串

如果提供,将使用此作为内容生成标签。

是否仅对屏幕阅读器可见通过以下方式进行控制
隐藏标签来自视觉.

  • 必需:否

onChange:(value?:Object)=>无效

通过交互更改边界值时调用的回调函数
选择或清除边框颜色、样式或宽度。

注:该值可能为未定义如果用户清除所有边框属性。

  • 必需:是

should SanitizeBorder:布尔值

如果选择使用,清理边界意味着如果没有宽度或颜色
选中时,边框样式也将被清除,并且未定义作为
新边框值。

  • 必需:否
  • 默认值:true

showDropdownHeader:布尔值

是否为边框颜色和样式选取器呈现标题
下拉列表。页眉包括一个用于颜色选择器的标签和一个关闭按钮。

  • 必需:否

大小:字符串

控件的大小。

  • 必需:否
  • 违约:违约
  • 允许的值:违约,__不稳定较大

value:对象

表示边框或未定义。用于设置当前边框
此组件的配置。

例子:

{颜色:'#72aee6',style:'实体',宽度:'2px,}
  • 必需:否

width:CSSProperties['width']

控制的可视宽度边框控件。如果
is紧凑型道具设置为真的.

  • 必需:否

使用滑块:布尔

标记此边框控件还应呈现RangeControl(范围控制)对于
对边框宽度的附加控制。

  • 必需:否

__next40pxDefaultSize:布尔值

开始选择更大的默认高度,这将成为未来版本的默认大小。

  • 必需:否
  • 违约: