Text ui-text
Displays a non-editable text field on the user interface. Each received msg.payload
will update the value shown alongside the (optional) label.
Properties
Prop | Dynamic | Description |
---|---|---|
Group | Defines which group of the UI Dashboard this widget will render in. | |
Size | Controls the width of the button with respect to the parent group. Maximum value is the width of the group. | |
Label | The text shown within the button. | |
Layout | Choose how to layout your label (if deifned) & value. | |
Style | Checkbox to define whether or not to include custom styling for the text. Enabling this will then show the below options. | |
Font | If "style" is enabled, this will define the font of the text. | |
Text Size | If "style" is enabled, this will define the size of the text. | |
Text Color | If "style" is enabled, this will define the color of the text. |
Rendering HTML
The ui-text
widget supports HTML content (via msg.payload
). This allows you to render formatted text, links, images, and more.
Static HTML
For example, injecting:
<a href="https://flowfuse.com" target="_blank">FlowFuse</a>
as a msg.payload
would render:
Rendering msg.
Content
If you want to render the content of a msg.
and still wrap this with HTML, you can use Node-RED's standard template
to define the HTML structure:
With the content of the template
node set to:
Example of a "template" node to structure HTML content in a Text Node
Dynamic Properties
Dynamic properties are those that can be overriden at runtime by sending a particular msg
to the node.
Where appropriate, the underlying values set within Node-RED will be overriden by the values set in the received messages.
Prop | Payload | Structures |
---|---|---|
Class | msg.class | String |
Example
Examples of variants of ui-text rendered in a Dashboard.