span

LIVE DEMO

span can be used to add a small piece of text. It enables using styles, such as color or font.

  • XML element: span

  • Java class: Span

Basics

Like its HTML counterpart, the span component can be used to add and style text. However, the span XML element cannot be applied to a piece of text contained in another XML element.

Use the html component to include native HTML directly.

Use span to create a short text on the view when no other component is appropriate. Such text can accompany a component if it does not fit within the label or helperText attributes, or if it has some other meaning.

It is possible to combine span with div to allow for different positioning relative to the component.

<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

In the above example, the content of div is placed on top and takes up all available width. The text in span is placed on the side and only requires the necessary amount of space, allowing to place several differently styled span components on a single line.

Note that a parent layout can force a line break after span. For example, a root layout of a standard view arranges all components in a vertical column.

Theme Variants

Use the themeNames attribute to customize component’s color, size, and shape. Start by transforming the component into a badge using themeNames = "badge". Then, apply supplementary themes to enhance different visual aspects.

Color

Choose among four color variants to convey the component’s visual intent: default, success, error, and contrast.

span badge color
XML code 
<span text="default" themeNames="badge"/>
<span text="success" themeNames="badge, success"/>
<span text="error" themeNames="badge, error"/>
<span text="contrast" themeNames="badge, contrast"/>

Combine the color variants with the primary theme to add extra emphasis:

span badge color primary
XML code 
<span text="default" themeNames="badge, primary"/>
<span text="success" themeNames="badge, success, primary"/>
<span text="error" themeNames="badge, error, primary"/>
<span text="contrast" themeNames="badge, contrast, primary"/>

Shape

Applying the pill theme creates a badge with rounded corners. Use it independently or combine with color themes:

span badge pill
XML code 
<span text="default" themeNames="badge, pill"/>
<span text="success" themeNames="badge, success, pill"/>
<span text="error" themeNames="badge, error, pill"/>
<span text="contrast" themeNames="badge, contrast, pill"/>

Size

Two size options are available: the default normal size and small.

span badge size
XML code 
<span text="normal" themeNames="badge, normal"/>
<span text="small" themeNames="badge, small"/>

Attributes

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

Handlers

AttachEvent - ClickEvent - DetachEvent

To generate a handler stub in Jmix Studio, use the Handlers tab of the Jmix UI inspector panel or the Generate Handler action available in the top panel of the view class and through the Code → Generate menu (Alt+Insert / Cmd+N).

ClickEvent

com.vaadin.flow.component.ClickEvent is sent when the user clicks on the component.

See Also

See MDN Docs for more information.