自定义SelectControl

自定义SelectControl允许用户从单选项菜单中选择项目，就像选择控制，还可以为菜单中的每个项目提供自定义样式。这意味着它不使用本机＜选择＞，因此只有在需要自定义样式时才应使用。

设计指南

这些与用于选择控制秒.

发展指南

用法

从'react'导入{useState}；从“@wordpress/components”导入{CustomSelectControl}；常量选项=[{key:'小'，name:'小'，样式：{fontSize:“50%”}，},{key：“正常”，name:'正常'，样式：{fontSize:“100%”}，},{key:'大'，name:'大'，样式：{fontSize:“200%”}，},{key:“巨大”，name:'巨大'，样式：{fontSize:“300%”}，},];函数MyCustomSelectControl（）{const[，setFontSize]=使用状态（）；返回(<自定义选择控件label=“字体大小”options={options}onChange={（{selectedItem}）=>setFontSize（selectedItem）}/>);}函数MyControlledCustomSelectControl（）{const[fontSize，setFontSize]=useState（选项[0]）；返回(<自定义选择控件label=“字体大小”options={options}onChange=｛（｛selectedItem｝）=>设置字体大小（selectedItem）｝value={options.find（（option）=>option.key===fontSize.key）}/>);}

道具

类名:一串

组件的可选类名。

• 必需：否

隐藏标签来自视觉:布尔值

直观地隐藏标签，同时保持辅助技术可用。

• 必需：否

描述人:一串

辅助技术使用的选择触发器按钮的说明。如果没有传递值，文本“Currently selected:selectedItem.name”将被完全翻译。

• 必需：否

标签:一串

控件的标签。

• 必需：是

onChange（更改时）:（newValue:ChangeObject）=>无效

使用控件的内部状态更改调用函数。这个选择的项目属性包含下一个选定项。

• 必需：否

选项:阵列<选项>

可以从中选择的选项列表。

• 必需：是

大小:'default'|'小'|'\_\_unstable-large'

控件的大小。

• 违约：“默认”
• 必需：否

显示所选提示:布尔值

在触发器按钮中显示所选项的提示。

• 必需：否

价值:选项

可以用于外部控制控件的值，如我的受控自定义选择控件上面的示例。

• 必需：否

鼠标移上:鼠标事件处理程序<HTMLButtonElement>

处理程序鼠标悬停触发按钮上的事件。

• 必需：否

鼠标移开时:鼠标事件处理程序<HTMLButtonElement>

处理程序鼠标移出触发按钮上的事件。

• 必需：否

获得焦点:焦点事件处理程序<HTMLButtonElement>

处理程序集中触发按钮上的事件。

• 必需：否

失去焦点:焦点事件处理程序<HTMLButtonElement>

处理程序模糊触发按钮上的事件。

• 必需：否

__next40px默认大小:布尔值

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

• 必需：否
• 违约：假

相关组件

• 与此组件类似，但使用本机＜选择＞当不需要自定义样式时选择控制组件。

• 要从集合中选择一个选项，当您想同时显示所有可用选项时，请使用收音机组件。

• 要从集合中选择一个或多个项目，请使用复选框控件组件。

• 要打开或关闭单个设置，请使用切换控件组件。

• 如果你有很多物品，组合框控件也许更适合。