Text

Text is an essential element in your interactive projects. With PandaSuite, you can create, customize, and integrate text simply while ensuring fluid layout, including for dynamic content.

Add a text block

To add a text block:

• Click on the Text icon located in the top menu bar.
• A new text block will appear in your workspace. Double-click it to edit its content.
• You can enter text manually or copy-paste it from another source.

Text properties

Here are the text block properties:

Style

• Font: PandaSuite provides access to over 700 free Google Fonts. You can also add your own fonts.
• Decoration: Text decoration options include: Underline, Uppercase, and Superscript.
• Alignment: Choose from the following alignment options: Left, Center, Right, or Justified.
• Line Spacing: Set the spacing between lines for optimized readability.

Content 

Click the Edit button to enter the text block. The Adapt Content button adjusts the text area based on the content inside, either by Width or Height.

Auto Size

The height of the text block automatically adjusts based on screen size. The block adapts to its content. This option is enabled by default. 

To configure this resizing, you can set the minimum and maximum size for resizing. For reference, 1.0 corresponds to the default size. We recommend selecting 0.1 as the minimum size and 10 as the maximum size.

If you do not wish to change the font size, choose 1.0 as both the minimum and maximum size.

Add dynamic content

Thanks to data binding, text can also adapt based on dynamic data, such as:

Source

To add dynamic content:

• If you want to dynamically replace the entire text block, click on the label Content 
• If you want to insert dynamic data into a static block, click the Insert Data button.

Choose the source:

• From a component: retrieve data from a component.
• From a database: retrieve data from the context of a database.
• From the project: retrieve data from the project context.
• PandaSuite Identifier: generate a unique identifier.
• Random Number: insert a random number between 0 and 1.

Layout

When your text content is dynamic (e.g., it adjusts based on the length of the data or screen size), it’s crucial to maintain a well-structured layout. This is where the Flexbox component becomes essential.

The component Flexbox allows you to:

Trigger an action from text 

You can trigger an action from a text block, just like any other object. 

To trigger an action from text: 

• Select the text block.
• Go to Actions and click the + button.
• Choose a trigger and the target of your action.