Link
The Link Widget is a navigational component that allows users to create clickable links within an application. These links can be used to redirect users to interfaces, master layouts , external URLs, or trigger specific actions within the application.
Following are the properties to be configured for the link:
| Property | Description | Comments |
|---|---|---|
| Basic Configuration | Anchor Type | Select the type of anchor link. Either text or template. If selected ‘Template’, a droppable container will be displayed. User can design the template by dragging and dropping widgets into it. |
| Text* | Specify the text for a link. This option is visible only when the anchor type is set as ‘Text’. | |
| Href | Specify the href. It is the target URL or destination the link navigates to. | |
| Target | Specify the target window or frame where the linked content will open. Options: _blank: Opens in a new window/tab _self: Opens in the same frame _parent: Opens in the parent frame _top: Opens in the full body of the window | |
| Bindings | Text | Provide the expression using the expression builder. Used for dynamically updating the link widget text. |
| Visibility | Specify a visibility condition. The link is visible only if the expression evaluates to true. | |
| Enable/Disable | Specify a condition for enabling the link. Enabled only if the expression evaluates to true. | |
| CSS Class | Specify model property binding which contains a CSS class. | |
| Click* | Associate the click event handler for the link widget. | |
| Additional Binding | Id | Select the appropriate id binding model property from the drop-down. |
| Badge Configuration | Badge Required | Specify whether the badge is required. A badge is a small visual indicator for notifications, counts, or statuses. e.g., Display the number of unread messages. |
| Badge Type | Select either 'Indicator Only' or 'With Value'. Indicator Only: Simple indicator With Value: Displays a specific value | |
| Badge Position | Specify where to place the badge. Options: Top-right, Top-left, Bottom-left, Bottom-right, Left, Right Only visible when Badge Type is 'With Value'. | |
| Contextual Variation | Define the badge color scheme. Options: primary, secondary, success, danger, warning, info, light, dark, default | |
| Badge CSS Class | Provide a custom CSS class for the badge. | |
| Badge Style | Apply direct CSS styling for the badge. | |
| Badge Value Binding | Provide an expression to update the badge value dynamically. | Only visible when Badge Type is 'With Value'. |
| Badge Visible Binding | Specify a condition to show or hide the badge. | Visible by default if no expression is provided. |
| Style and Layout | Height | Provide the height value. |
| Width | Provide the width value. | |
| Unit Type | Select unit type: px, rem, % — applies to Height and Width. | |
| Alignment | Specify the alignment of the component. | |
| Style | Custom CSS rules for nav item appearance. | |
| CSS Class | Custom CSS class for styling the nav item. | |
| Additional Configuration | Id* | Provide a unique identifier. An ID is created by default and can be changed. |
Note: An asterisk (*) denotes that the property is mandatory for link.
The "Configuration saved successfully" message displays upon successfully configuring the link.
Note: Additional Bindings, Attributes Configuration, Additional Event Bindings, Style & Layout, Style Bindings, ARIA Attributes Bindings, Tooltip Configuration