nativeLabel 原生标题

nativeLabel 对应 HTML 的 label 元素，可用于为组件创建标题。

XML 元素

nativeLabel

Java 类

NativeLabel

XML 属性

id - alignSelf - classNames - colspan - css - dataContainer - enabled - height - maxHeight - maxWidth - minHeight - minWidth - property - setFor - text - themeNames - title - visible - whiteSpace - width

事件和处理器

AttachEvent - ClickEvent - DetachEvent

基本用法

nativeLabel 组件可以替换 Jmix 中大多数 UI 组件的 label 属性。

如需为某个组件设置标题，需要将 label 的 setFor 属性设置为目标组件的 id。例如，为 checkbox 设置标题：

<div>
    <checkbox id ="checkbox"/>
    <nativeLabel text="Enable Notifications" setFor="checkbox"/>
</div>
label basic

将 label 与组件关联可以使得辅助功能技术能正确地解析组件的标题，比如屏幕阅读器。

如需添加不与组件关联的文本，请使用 span 或 div 组件。

动态标题

如需动态设置或更新 nativeLabel 展示文本，首先需要设置其 id 属性：

<nativeLabel id="dynamicLabel" setFor="button"/>
<button id="button" text="Click"/>

在视图控制器中，通过 id 引用这个标签，然后使用 setText() 方法更新文本：

@ViewComponent
private NativeLabel dynamicLabel;

@Subscribe("button")
public void onButtonClick(final ClickEvent<JmixButton> event) {
    dynamicLabel.setText("Button clicked " + event.getClickCount() + " times.");
}
label dynamic

样式版本

使用 themeNames 属性来自定义组件的颜色、大小和形状。首先使用 themeNames = "badge" 将组件转换为徽章。然后，使用其他主题来增强组件的视觉效果。

配色

有四种配色可选，用于表达组件的意图：默认、success、error`和 `contrast。

label badge color
XML 代码 
<nativeLabel text="default" themeNames="badge"/>
<nativeLabel text="success" themeNames="badge, success"/>
<nativeLabel text="error" themeNames="badge, error"/>
<nativeLabel text="contrast" themeNames="badge, contrast"/>

将配色与 primary 主题一起使用可以更加显著地显示。

label badge color primary
XML 代码 
<nativeLabel text="default" themeNames="badge, primary"/>
<nativeLabel text="success" themeNames="badge, success, primary"/>
<nativeLabel text="error" themeNames="badge, error, primary"/>
<nativeLabel text="contrast" themeNames="badge, contrast, primary"/>

形状

应用 pill 主题会创建一个带有圆角的徽章。可独立使用或与配色主题结合使用：

label badge pill
XML 代码 
<nativeLabel text="default" themeNames="badge, pill"/>
<nativeLabel text="success" themeNames="badge, success, pill"/>
<nativeLabel text="error" themeNames="badge, error, pill"/>
<nativeLabel text="contrast" themeNames="badge, contrast, pill"/>

尺寸

有两个选择：默认的 normal 和 small。

label badge size
XML 代码 
<nativeLabel text="normal" themeNames="badge, normal"/>
<nativeLabel text="small" themeNames="badge, small"/>

XML 属性

在 Jmix 中，所有组件都有一些作用一致的 通用属性。 下面是 nativeLabel 的特殊属性：

名称

描述

默认值

themeNames

为组件添加一个样式版本。支持：badge、normal、success、error、contrast、primary、small、pill。样式生效需要与 badge 一起使用，请参考 上面的示例。

预定义的样式是一组 CSS 类，有可能影响组件或内部组件的其他样式设置。

-

setFor

标签通过元素的 id 与特定元素关联，从而使屏幕阅读器等辅助技术能正确理解。

-

事件和处理器

在 Jmix 中，所有组件都有一些 通用事件和处理器，可以按相同的方法设置。 下面是 nativeLabel 的特殊事件和处理器：

在 Jmix Studio 生成处理器桩代码时，可以使用 Jmix UI 组件面板的 Handlers 标签页或者视图类顶部面板的 Generate Handler 添加，也可以通过 Code → Generate 菜单（Alt+Insert / Cmd+N）生成。

名称

描述

ClickEvent

当点击组件时触发 com.vaadin.flow.component.ClickEvent 事件。该事件的处理方法需要指定处理的是以下哪种点击事件：

click – 当用户点击组件时触发。

singleClick – 当用户在单击组件一小段时间后会（确保不是双击）触发。

doubleClick – 当用户在短时间内点击组件两次时触发。

参考

MDN 文档