Mashup Builder > 小组件 > 标准小组件 > 文本区域小组件
文本区域小组件
“文本区域”小组件使混搭用户能够在混搭中输入多行文本。
* 
“文本区域”小组件可在 ThingWorx Platform 中用作标准小组件,也可用作 web 组件 (可从 SDK 导入)。
默认小组件大小
文本区域小组件的大小因 ThingWorx 版本而异:
在 ThingWorx 9.3.2 及更高版本中,该小组件默认为响应式小组件。该小组件添加至空容器后会展开以填充容器内所有可用空间。
在早期的 ThingWorx 版本中,小组件的默认宽度和高度可通过属性手动调整。
迁至 ThingWorx 9.3.2 或更高版本后,在容器中显示为单个小组件的文本区域小组件将填充容器内所有可用空间。此更改可能会影响混搭布局。要更新布局,请确保对混搭布局进行调整。有关详细信息,请参阅以下部分。
ThingWorx 9.3.1 及更低版本中的小组件大小
默认情况下,将使用默认宽度和高度尺寸显示文本区域。宽度被设置为固定值。但却将高度设置为 Autosize 以允许小组件沿垂直方向增大。在键入期间,小组件将增大,以在文本超出可用空间时显示额外字符,直到达到 MaxNumberOfCharacters 属性中所定义的值。可添加额外的小组件并使用“布局”面板上的对齐和分布选项对布局进行控制。下图显示了混搭布局中的小组件:
布局分为以下几部分:
1. 包含四个小组件的响应式容器:一个标签、两个文本字段和一个文本区域。
2. 带有两个按钮的固定容器。
小组件宽度被设置为固定值。但高度被设置为 Autosize 以允许小组件在字符数量超出可用空间时沿垂直方向展开。可使用 WidthHeight 属性调整小组件大小。并显示有省略号。
ThingWorx 9.3.2 及更高版本中的小组件大小
将小组件添加至新混搭或现有混搭后,将根据小组件的容器大小设置小组件的默认尺寸。小组件会自动增大以填充容器内可用空间。要相对于布局调整小组件尺寸,必须使用 Layout 面板配置容器布局。小组件在容器上展开后,“属性”面板中不会列出 WidthHeight 属性。向文本区域容器添加附加小组件后,可恢复先前的大小。下图显示了 ThingWorx Platform 9.3.2 或更高版本中响应式容器内的小组件。
布局分为以下几部分:
1. 具有固定高度的静态容器,其中包含三个小组件:一个标签小组件和两个文本字段小组件。各项的方向被设置为“垂直”
2. 带有文本区域小组件的响应式容器。
3. 显示两个按钮的静态容器。
可通过使用单独容器显示小组件来创建响应性更佳的布局。下图显示的是在之前版本中混搭拥有更多可用空间时的表单。请注意,文本区域的大小取决于容器大小,文本字段始终保持不变。
小组件属性
下面列出了“文本区域”小组件的属性。
属性名称
说明
基本类型
默认值
是否可绑定? (Y/N)
是否可本地化? (Y/N)
Text
文本区域中显示的文本。
STRING
不可用
Y
Y
Label
作为文本区域标签显示的文本。
STRING
不可用
Y
Y
Counter
计算并显示文本区域中输入的字符数。
BOOLEAN
False
N
N
MaxNumberOfCharacters
用于设置文本区域中所允许的最大字符数。
NUMBER
100
Y
N
HintText
显示用于说明字段中应输入内容的占位符文本。
STRING
不适用
N
Y
Disabled
使用此属性可以禁用混搭中的小组件。小组件会显示在混搭中,但无法单击。
BOOLEAN
False
Y
N
ReadOnly
用于将文本区域设置为只读,从而使得用户无法编辑所包含的文本。
BOOLEAN
False
N
N
TextAlignment
用于靠左或靠右对齐文本。
STRING
N
N
LabelAlignment
可用于靠左、靠右或居中对齐标签。
STRING
N
N
TabSequence
当用户按下 Tab 键时,内容将在其中突出显示的小组件序列。
NUMBER
不可用
N
N
CustomClass
用于定义要应用于小组件顶层 div 的 CSS 类。可以输入多个类,以空格作为分隔符。
STRING
不可用
Y
N
Changed
修改数据时所触发的事件。
不适用
不适用
Y
N
ResetToDefaultValue
将此小组件的输入重置为其默认值。
不适用
不适用
Y
N
Width
小组件宽度。
在 ThingWorx 9.3.2 或更高版本中,除非将小组件添加至具有一个或多个小组件的容器中,否则此属性将处于隐藏状态。
NUMBER
273
N
N
Height
小组件高度。默认情况下将自动计算此值。在属性面板中输入一个值,或在工作区中调整小组件的大小,以设置固定的高度。在 ThingWorx 9.3.2 或更高版本中,除非将小组件添加至具有一个或多个小组件的容器中,否则此属性将处于隐藏状态。
NUMBER
自动大小
N
N
MinWidth
小组件被添加至 ThingWorx 9.3.2 或更高版本中的响应式容器后,设置小组件的最小宽度。
NUMBER
不可用
N
N
TextChanged
对小组件值进行更新后,单击小组件之外的区域时将触发的可绑定事件。
不适用
不适用
Y
N
TooltipField
设置当您将光标悬停在小组件上时显示的工具提示文本。
STRING
不可用
Y
Y
TooltipIcon
设置小组件工具提示的图标图像。
可添加图像或指定图像 URL 路径。
MEDIA ENTITY
不适用
N
N
验证小组件数据
除常用验证属性外,还可使用 MaxLengthMinLength 属性来验证文本区域小组件内的字符数。
可使用 MaxLengthFailureMessageMinLengthFailureMessage 属性自定义默认失败消息。使用 ${value} 参数在消息中显示最大值和最小值。
有关使用常用验证属性的详细信息,请参阅将验证应用于小组件
下表列出了 ThingWorx 9.3.4 或更高版本中“验证”面板上提供的验证属性。
属性
说明
基本类型
默认值
是否可绑定 (Y/N)
是否可本地化 (Y/N)
CriteriaMessage
有关验证条件以及验证失败时显示的消息。
STRING
不可用
Y
Y
CriteriaMessageDetails
针对验证条件和失败消息显示的详细信息。
STRING
不可用
Y
Y
MaxLength
文本区域值的最大长度。
STRING
不可用
Y
N
MaxLengthFailureMessage
当前值超出最大字符长度时显示的消息。
STRING
${value} characters is the maximum
Y
Y
MinLength
文本区域值的最小长度。
STRING
不可用
Y
N
MinLengthFailureMessage
当前值低于最小字符长度时显示的消息。
STRING
${value} characters is the minimum
Y
Y
RequiredMessage
必需值设置为 true 且未选择任何项时显示的消息。
STRING
必需提供值
Y
Y
ShowValidationCriteria
编辑文本区域时显示有关所需输入的提示消息。
BOOLEAN
False
Y
N
ShowValidationFailure
当输入的值验证失败时,显示失败消息。
BOOLEAN
False
Y
N
ShowValidationSuccess
当输入的值验证成功时,显示成功消息。
BOOLEAN
False
Y
N
SuccessMessage
验证成功时显示的消息。
STRING
不可用
Y
Y
SuccessMessageDetails
二级消息,显示关于验证成功消息的更多信息。
STRING
不可用
Y
Y
Validate
更改小组件值时触发的可绑定事件。将此事件绑定至服务或函数以应用验证模式或表达式。
事件
不可用
Y
N
ValidationCriteriaIcon
针对关于验证条件的提示消息,选择在其中显示的 SVG 图标。
IMAGELINK
info
N
N
ValidationFailureIcon
设置验证失败时显示在状况消息中的 SVG 图标。
IMAGELINK
error
N
N
ValidationOutput
检索小组件验证的输出。返回值为 UndefinedValidUnvalidatedInvalid
STRING
不可用
Y
N
ValidationState
用于设置验证状态的可绑定属性。可将此属性设置为 UndefinedUnvalidatedValidInvalid
STRING
Undefined
Y
N
ValidationSuccessIcon
选择验证成功时显示在状态消息中的 SVG 图标。
IMAGELINK
success
N
N
ValueRequired
需要选择列表内的其中一项。
BOOLEAN
False
Y
N
这对您有帮助吗?