Text
A text element with typography presets (h1–h6, paragraph, quote). The workhorse for labels, headings and value readouts.
Reach for it when you need:
- Labels and headings
- A numeric readout bound to a tag
Component name: Text · Category: Display
In the palette: Text element with typography presets (h1–h6, paragraph, quote…)
Properties
Any property can be bound to a tag, another component's property, or a query.
| Property | Type | Default | Description |
|---|---|---|---|
content | string | Text | — |
variant | enum | p | Typography preset. Sets the semantic tag and base type styling. Options: p · h1 · h2 · h3 · h4 · h5 · h6 · lead · large · small · muted · blockquote · code. |
size | enum | inherit | Scales the whole preset: body text is 12 / 14 / 16 / 18 / 20 px for xs…xl and headings keep their ratio to it. Project default = the project's Control size. A font size set in textStyle wins. Options: inherit · xs · sm · md · lg · xl. 1.0.8 |
textStyle | textStyle | {} | Typography styles (font, size, weight, alignment, spacing, decoration…) |
width | string | 100% | — |
height | string | auto | — |
style | style | {} | Custom CSS properties |
Events
Attach event actions to these in the Event Manager.
| Event | Label | Group | Payload |
|---|---|---|---|
click | Click | Mouse | The DOM event. |
dblclick | Double click | Mouse | The DOM event. |
contextmenu | Right click | Mouse | The DOM event. |
mouseenter | Mouse enter | Mouse | The DOM event. |
mouseleave | Mouse leave | Mouse | The DOM event. |
contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.
Notes
Set the number format on the tag, not here — then every screen showing that tag formats it identically.
Editing the text on the canvas New in 1.0.8
Double-click a Text on the Designer canvas to type into it where it stands. Enter or a click elsewhere commits, Escape cancels, and the whole edit is one undo step.
- It edits the text as stored, so a template such as
Speed {{tag.Line1/Speed}}is edited as you wrote it, binding and all. Content bound as a whole has nothing to edit in place; change its binding instead. - It is one plain line. Pasted formatting and line breaks are flattened.
- Emptying the text and committing keeps the old text rather than leaving an invisible widget.
Size New in 1.0.8
The typography presets are now ratios of one body size, set by size: 12, 14, 16, 18 or 20 px for xs to xl, with every heading keeping its ratio to it. md is exactly the old look (paragraph 16 px, H1 36 px). Project default follows the project's Control size, and a font size set in textStyle still wins.
The project Control size defaults to sm, so an upgraded project's Text widgets render one step down — a paragraph at 14 px instead of 16. Set the Control size to md to get the old sizes back everywhere, or size on one widget, or a font size in its textStyle, which always wins.