nativeLabel 原生标题

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

  • XML 元素：nativeLabel

  • Java 类：NativeLabel

基本用法

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 属性

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

setFor

设置该 label 关联的目标组件 id。

whiteSpace

MDN

定义组件的 white-space 样式值。支持：

  • NORMAL

  • NOWRAP

  • PRE

  • PRE_WRAP

  • PRE_LINE

  • BREAK_SPACES

  • INHERIT

  • INITIAL

事件和处理器

AttachEvent - DetachEvent

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

参考

MDN 文档