Link

Introduction

Welcome to the Link component documentation! As part of the page builder in App Platform, the Link component allows you to embed hyperlinks within your apps, enabling users to navigate to different sections with the app or external sites, or even to download resources with just a click.

Why we developed it

Links are fundamental elements of the web, essential for connecting content and guiding user navigation. The Link component streamlines the process of integrating these navigational aids into applications, ensuring that users can easily access related resources, both internally and externally, enhancing the overall usability and interactivity of the application.

What it could be used for...

• Navigating to different pages within the application.

• Linking to external websites that provide additional information or resources.

• Downloading files, such as PDFs, directly from the application.

• Initiating email communications by linking to "mailto:" addresses, or other, URL syntax's.

Example \ Use Case

Consider an internal company portal where employees need to access various departments. The Link component could be used to create a central dashboard with links to each department. For instance, clicking on a "Human Resources" link might take an employee to an internal HR page where they can find forms and contact information, streamlining navigation and improving the user experience within the portal.

Adding a Link on your page

1. Access the Canvas: Open the page you're working on in edit mode, in App Platform.

2. Drag-and-Drop: Locate the 'Link' component in the component library, then drag and drop it onto the canvas.

Configuring the Link component

1. Select the component: Click on the added 'Link' component to select it.

2. Properties Panel: On the properties panel, you'll find various configurable options:

   • Link Text: Specify the text for the link.

   • URL Settings

     • Select a page: Select an existing page in the app to which the link redirects when clicked.

     • URL to Redirect on click: Specify the URL to which the button redirects when clicked.

     • Open as new tab: Toggle to open the page, or URL, in a new tab.

   • Style

     • Render as list item: Toggle to render link in list format. (Useful for when then link is nested in a sidebar component).

   • Icon

     • Disable Link Icon: Toggle to show\hide icon with link.

     • Icon: Specify an icon from Material UI to show next to link.

     • Icon Size: Adjust the size of the icon.

   • Typography

     • Override Theme: Toggle to enable\disable custom styling.

     • Text Variant: Set the font style.

     • Font Size: Adjust the font size.

     • Font Weight: Adjust the font weight; 'Regular', 'Medium' or 'Bold'.

     • Colors

       • Background: Set the color of the background.

       • Text: Set the color of the text.

   • Spacing

     • Margin: Adjust the distance between the link component and its surrounding components.

     • Padding: Adjust the size of the link, relative to its text.

   • Decoration

     • Radius: Adjust the degree of rounded appearance.

3. 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! 🎨🚀