textArea 文本域
textArea 一个支持输入多行文本的区域。
XML 元素 |
|
|---|---|
Java 类 |
|
基本用法
当输入可能跨越多行（例如评论或描述）时，请使用 textArea。
<textArea id="textArea" value="Great job. This is excellent!" label="Comment"
valueChangeMode="EAGER" maxLength="140" helperText="29/140"/>
<textArea id="textArea2" value="Everything you do works great!" label="Additional comment"/>如果未设置固定高度，textArea 会根据内容自动调整高度。默认高度和最小高度是两行文字。
数据感知的 textArea
使用 dataContainer 和 property 属性将 textArea 与一个实体属性绑定。数据容器提供实体实例，property 表示需要使用该组件编辑的属性。
数据感知的 textArea 示例：
<data>
<instance id="orderDc"
class="io.jmix.uisamples.entity.Order"
fetchPlan="_local"/>
</data>
<layout>
<textArea id="textArea" label="Order description"
dataContainer="orderDc" property="description"/>
<hbox>
<span text="Value in the container:"/>
<span id="spanValue"/>
</hbox>
</layout>@ViewComponent
protected InstanceContainer<Order> orderDc;
@ViewComponent
protected Span spanValue;
@Autowired
protected Metadata metadata;
@Subscribe
protected void onInit(InitEvent event) {
Order order = metadata.create(Order.class);
order.setDescription("Deliver as quickly as possible.");
orderDc.setItem(order);
}
@Subscribe("textArea")
protected void onTextAreaValueChange(ComponentValueChangeEvent<JmixTextArea, String> changeEvent) {
spanValue.setText(orderDc.getItem().getDescription());
}确保需要绑定的实体属性为字符串类型。与 textField 文本框 不同，textArea 是专门为处理文本数据而设计的。
大小可调
配置一个可调整大小的 CSS 类，让用户可以水平、垂直或两个方向调整文本区域的大小。在样式表中设置相应的 resize 值并使用溢出处理。
<textArea id="textArea" label="Standard TextArea"/>
<textArea id="resizableBothTextArea" label="Resizeable TextArea"
classNames="resizable-both"
themeNames="helper-above-field"
helperText="Both direction"/>
<textArea id="resizableVerticalTextArea" label="Resizeable TextArea"
classNames="resizable-vertical"
themeNames="helper-above-field"
helperText="Vertical direction"/>
<textArea id="resizableHorizontalTextArea" label="Resizeable TextArea"
classNames="resizable-horizontal"
themeNames="helper-above-field"
helperText="Horizontal direction"/>.resizable-both {
resize: both;
overflow: auto;
padding-bottom: unset;
}
.resizable-vertical {
resize: vertical;
overflow: auto;
padding-bottom: unset;
}
.resizable-horizontal {
resize: horizontal;
overflow: auto;
padding-bottom: unset;
}样式版本
使用 themeNames 属性配置一个或多个样式。
| 样式 | 描述 | 支持的主题 |
|---|---|---|
|
组件尺寸较小 |
Aura, Lumo |
|
字段值左对齐 |
Aura, Lumo |
|
字段值居中 |
Aura, Lumo |
|
字段值右对齐 |
Aura, Lumo |
|
帮助文字显示在字段上方，标题下方。 |
Aura, Lumo |
XML 属性
下面是 textArea 的特殊属性：
| 名称 | 描述 | 默认值 |
|---|---|---|
设置组件是否显示清除按钮。 |
|
|
设置最大行数。 |
— |
|
设置最小行数。 |
2 |
|
设置当组件获得焦点时，是否自动选中文本。 |
— |
|
如果为 |
— |
下面是 textArea 支持的其他通用属性：
id - dataContainer - property - label - helperText - required - readOnly - enabled - valueChangeMode - themeNames - visible - width - height - minWidth - maxWidth - minHeight - maxHeight - minLength - maxLength - alignSelf - colspan - classNames - css - errorMessage - ariaLabel - ariaLabelledBy - autocapitalize - autocomplete - autocorrect - autofocus - focusShortcut - tabIndex - placeholder - pattern - allowedCharPattern - value