TextControl 组件允许用户输入和编辑文本。
设计指南
用法
何时使用 TextControls
TextControl 最适合用于自由文本输入。如果您有一组预定义的选项希望用户从中选择，最好使用更受限的组件，例如 SelectControl、RadioControl、CheckboxControl 或 RangeControl。
由于 TextControl 是单行字段，它们不适合收集长篇回复。对于此类情况，请使用文本区域（textarea）。
TextControl 应当：
- 突出显示并表明用户可以输入信息。
- 具有清晰区分的状态（选中/未选中，活动/非活动）。
- 使请求的信息易于理解，并便于处理任何错误。
- 具有可见的标签；占位符文本不能替代标签，因为当用户开始键入时它会消失。
结构
- 标签
- 输入容器
- 输入文本
标签文本
标签文本用于告知用户文本字段请求的是什么信息。每个文本字段都应有一个标签。标签文本应位于输入字段上方，并且始终可见。
容器
通过创建文本字段与周围内容之间的对比，容器提高了文本字段的可发现性。
正确做法
容器周围的描边清楚地表明用户可以输入信息。
错误做法
不要使用不清晰的视觉标记来指示文本字段。
开发指南
用法
渲染一个用户界面以输入额外的 CSS 类名称。
import { useState } from 'react';
import { TextControl } from '@wordpress/components';
const MyTextControl = () => {
const [ className, setClassName ] = useState( '' );
return (
<TextControl
label="Additional CSS Class"
value={ className }
onChange={ ( value ) => setClassName( value ) }
/>
);
};
属性
该组件接受的属性集将在下方指定。
未包含在此集中的属性将应用于输入元素。
label
如果添加此属性，将使用 label 属性的内容生成标签。
- 类型：
String - 必填：否
hideLabelFromVision
如果为 true，则标签仅对屏幕阅读器可见。
- 类型：
Boolean - 必填：否
help
如果添加此属性，将使用 help 属性的内容生成帮助文本。
- 类型：
String - 必填：否
type
要渲染的输入元素的类型。默认为 “text”。
- 类型：
String - 必填：否
- 默认值：“text”
value
输入的当前值。
- 类型：
String | Number - 必填：是
className
添加到包装器 div 类的 “components-base-control” 的类。
如果未传递 className，则仅使用 components-base-control。
- 类型：
String - 必填：否
onChange
接收输入值的函数。
- 类型：
function - 必填：是
相关组件
- 为了向用户提供更多受限的输入选项，请使用 SelectControl、RadioControl、CheckboxControl 或 RangeControl。