Text
Introduction
Welcome to the Text component documentation! As part of the page builder in App Platform, the Text component allows you to incorporate customizable text blocks into your web applications. This component is essential for adding readable content that informs, guides, or communicates with users, making it a fundamental element for building any web-based interface.
Why we developed it
The Text component provides a simple yet versatile way to insert and format textual content within applications. It supports various typographic options to enhance readability and aesthetic appeal.
What it could be used for
Displaying informative content like service descriptions, company information, or user guides.
Showing dynamic text content, such as user names, statuses, or other personalized information.
Creating headers, labels, or annotations that help users navigate and understand the layout and functions of the application.
Example \ Use Case
In a service management application, the Text component could be employed to provide detailed descriptions of each service offered, such as network security monitoring, data backup solutions, or technical support services. Each service page could feature headings, subheadings, and paragraphs that explain what the service includes, its benefits, and how clients can subscribe or inquire for more details.
Adding Text to your page
Access the Canvas: Open the page you're working on in edit mode, in App Platform.
Drag-and-Drop: Locate the 'Text' component in the component library, then drag and drop it onto the canvas.
Configuring the Text component
Select the component: Click on the added 'Text' component to select it.
Properties Panel: On the properties panel, you'll find various configurable options:
Text: Define the text that will be displayed in the component
Typography
Text Variant: Set the style of the text.
Font Size: Adjust the size of the text.
Align: Set the alignment of the text in the component; 'Left', 'Center' or 'Right'.
Weight: Set the weigh of the font; 'Regular', 'Medium' or 'Bold'.
Appearance
Text: Set the color of the text.
Shadow: Adjust the intensity of the text's shadow.
Margin: Adjust the distance between the text component and its surrounding components.
Live Preview: The canvas provides a live preview of your configured component(s) once you've made changes.
If you have any questions or need assistance, feel free to reach out to our support team. - Happy designing! 🎨🚀
Last updated
