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 与组件关联可以使得辅助功能技术能正确地解析组件的标题,比如屏幕阅读器。

如需添加不与组件关联的文本,请使用 spandiv 组件。

动态标题

如需动态设置或更新 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" 将组件转换为徽章。然后,使用其他主题来增强组件的视觉效果。

配色

有四种配色可选,用于表达组件的意图:默认、successerror`和 `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"/>

尺寸

有两个选择:默认的 normalsmall

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

XML 属性

setFor

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

whiteSpace

MDN

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

  • NORMAL

  • NOWRAP

  • PRE

  • PRE_WRAP

  • PRE_LINE

  • BREAK_SPACES

  • INHERIT

  • INITIAL

事件和处理器

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

参考