Paragraph (ALPHA)
Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).
The Paragraph widget shows plain text. Use it for descriptions, help text, and other body copy. For a title, use the Heading widget. For formatted text with lists and links, use the Markdown widget.
Widget type: WDS_PARAGRAPH_WIDGET
Content properties
These properties appear in the Content tab of the property pane.
General
Text string
Sets the text the widget shows. You can bind data to it, for example {{AnvilTable1.selectedRow.description}}.
Line clamp (max lines) number
Sets the largest number of lines the widget shows. Text past that line is cut off. When you set a line clamp, users can hover over the text to see all of it. The value must be 1 or more. Leave it empty to show all lines.
Visible boolean
Controls whether the widget is visible. Default: on.
Animate loading boolean
Controls the loading animation of the widget. Default: on.
Style properties
These properties appear in the Style tab of the property pane.
General
Font size string
Sets the size of the text. Options: Body (default), Subtitle, Title, Heading.
Values for code: body, subtitle, title, heading.
When you pick Subtitle, Title, or Heading in the property pane, the widget turns into a Heading widget. When you pick Body, it stays a Paragraph widget.
Text formatting
Text color string
Sets a custom color for the text. This overrides the theme color.
Alignment string
Sets the horizontal alignment of the text. Options: left (default), center, right.
Values for code: left, center, right.
Emphasis string
Makes the text bold, italic, or both.
Values for code: bold, italic. To use both, include both words, for example bold,italic.
Reference properties
Reference properties let you read the widget's state in bindings and code, for example {{Paragraph1.isVisible}}. You cannot set them directly.
text string
The text the widget shows.
Example:
{{Paragraph1.text}}
value string
The same value as text.
Example:
{{Paragraph1.value}}
isVisible boolean
Shows whether the widget is visible.
Example:
{{Paragraph1.isVisible}}
Methods
Methods let you change the widget's properties from code, for example in a JS Object.
setVisibility (param: boolean): Promise
Shows or hides the widget.
Example:
Paragraph1.setVisibility(false)
setText (param: string): Promise
Sets the text the widget shows.
Example:
Paragraph1.setText("Your order has shipped.")
setTextColor (param: string): Promise
Sets the text color.
Example:
Paragraph1.setTextColor("#d92d20")
setDisabled (param: boolean): Promise
Sets the isDisabled value. The Paragraph widget has no Disabled property and does not change how it looks or works.
Example:
Paragraph1.setDisabled(true)
setRequired (param: boolean): Promise
Sets the isRequired value. The Paragraph widget has no Required property and does not change how it looks or works.
Example:
Paragraph1.setRequired(true)