Rich Text
The Rich Text widget allows you to display text with multiple styles within a single text block. Unlike the basic Text widget, Rich Text enables you to apply different formatting, colors, and styles to different parts of your text content, making it perfect for creating rich, formatted text experiences.
It's ideal for scenarios where you need mixed styling in a single text block, such as highlighting keywords, creating colorful text segments, or adding interactive elements to specific portions of text.
Customizing Rich Text
The Rich Text widget provides two main areas for customization:
Text Spans: Manage individual text segments with their own styling and interactions
Text Span Properties: Control overall text behavior like alignment, overflow, and base styling
Text Spans Properties
The Text Spans section allows you to create and manage multiple text segments, each with its own styling and behavior.
Text Span [Index]
Individual text segments that can contain string content or expressions. Each span can have its own styling and onClick actions.
Managing Text Spans
Add New Spans: Click the "Add New" button at the bottom of the Text Spans section to create additional text segments
Reorder Spans: Hover over the left edge of any span to reveal the drag handle, then drag to reorder
Delete Spans: Hover over the left edge of any span to reveal the delete button
Edit Spans: Click the pencil icon on the right side of any span to open the editing modal
Individual Text Span Modal
When you click the pencil icon on a text span, a modal opens with the following options:
Text Style
Controls the font styling for this specific text span. Can be linked to predefined text styles or customized individually.
On Click
Defines the action that occurs when users click on this specific text span.
Text Style Properties (Individual Spans)
Each text span has its own Text Style Properties with the same functionality as the Text widget:
Text Span Property
These properties control the overall behavior and appearance of the entire Rich Text widget.
Text Style
Base text style applied to all spans unless overridden by individual span styling. Text Style Properties
Max Lines
Limits the number of lines shown for the entire Rich Text widget. If empty, the text will expand as needed.
Alignment
Aligns the entire text block horizontally (left, center, right, justify).
Overflow
Controls how text overflows when it exceeds the available space. Options include clip, fade, ellipsis, visible, marquee.
Default Properties
The Rich Text widget supports all Default Properties.
Best Practices
Use Rich Text when you need multiple styles within a single text block
Keep the number of text spans reasonable to maintain performance
Use consistent styling across similar text spans for visual coherence
Leverage individual span click actions for interactive text elements
Consider using the base Text Style for common styling across all spans
Use expressions in text spans for dynamic content
Last updated