Text¶
The Text widget shows a piece of text on a page. The text can be fixed, or it can be filled in from the page's data, so the same widget can show a greeting with the visitor's name or a caption with the selected year. Use it for captions, short explanations, labels next to a chart, and any value you want to display as plain text.
See also Heading for page and section titles, and Badge and Alert for status messages.
Using it¶
Drop a Text widget onto the page and type into its Text field. To show a value from the page, put the value's name in braces. For example, Welcome back, {$data.customer.name} shows the customer's name from a data source called customer. The text updates on its own when the value changes.
// A value from the page's data
Welcome back, {$data.customer.name}
// A page parameter
Statements for {$params.year}
// A value another widget published
Selected: {$vars.selectedRow.name}Page and Portal State explains which of these keywords to use where. The syntax inside the braces is the same as in text templates for reports.
Options¶
| Option | Values | Default | Description |
|---|---|---|---|
| Text | Any text or template, over several lines | Text |
The text to show |
| Text Align | Left · Center · Right | From theme | Where the text sits horizontally |
| Style | Italic, plus one of Underline · Strikethrough · Overline | Off | Emphasis toggles |
| Inherit styles | On · Off | Off | When on, the text ignores its own theme styling and takes the styling of the widget it sits in. Use this for text inside a section header or footer |
| Variant | Theme variants | Default | Picks a look for the text from the theme. Hidden while Inherit styles is on. See Variants |
| Per-part theme styles | Theme values | From theme | Theme values for this one widget. Hidden while Inherit styles is on |
| Custom Style | CSS | Empty | Extra styling for the text |
| Box Style | Sizing and spacing | — | The box around the text |
Tips¶
A few things to keep in mind:
- Templates are evaluated live. When the underlying value changes, the text updates without a page reload.
- Turn on Inherit styles for text that sits inside another widget's slot and should look like its surroundings.
- For a title that carries document structure, use Heading instead.