span 文本

在线示例

span 可用来添加文本。支持使用样式，比如颜色和字体。

  • XML 元素：span

  • Java 类：Span

基本用法

与 HTML 中的同名元素一样，span 组件可以用来添加文本或为文本添加样式。但是，XML 中的 span 元素不能用在其他 XML 元素中的部分文本。

使用 htmlObject 组件在视图中添加 HTML 内容。

当其他组件都不太合适时，可以使用 span 创建短文本。在 label 或 helperText 属性都不合适时，这种文本可以与组件一同使用。

span 可以与 div 组合以实现不同的布局。

<div>
    <div text="What is the largest planet in the Solar system?"/>
    <textField/>
    <span classNames="font-bold" text=" Correct! "/>
    <span text="Jupiter has both the greatest mass and volume."/>
</div>
span basic

上面的示例中，div 的内容放置于顶部，并占用全部可用宽度。span 中的文本放置在旁边，并且只占据了所需的空，这样一来可以在一行内同时放置多个不同样式的 span 元素。

注意，父布局组件可以强制在 span 后换行。例如，标准视图的 root 布局会将所有内部元素垂直排列。

XML 属性

id - classNames - colspan - enabled - height - maxHeight - maxWidth - minHeight - minWidth - text - themeNames - title - visible - whiteSpace - width

事件和处理器

AttachEvent - ClickEvent - DetachEvent

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

ClickEvent

com.vaadin.flow.component.ClickEvent 当用户点击组件时发送。

参考

MDN 文档