Link

Overview of the Link Component

Link Component

The Link component is used for navigating to a specified URL or route. This component is based on Angular routing.

📘
Note
To use the Link component, you must first specify your project routes. These routes can be defined in the Project settings under the Routing tab. The specified route names will appear in the dropdown list of the Route Name property.

Properties

🚧
Important Note
This document lists properties specific to this UI component. For properties common to most UI components, please refer to the General components document.

By default, the Link component has the following properties:

Common Properties

Property Name	Property Description
Route Name	List of route names defined on the Routing tab.
Route Params	Set the value of Route Params to pass parameters in the URL during navigation. Multiple values should be separated with commas (`param1, param2, ...`).
Preset Mode	Specify a mode that determines which properties can be set. There are different tags used for the link depending on the chosen Preset mode: Ionic or Custom, which define what Container values will be preselected (see below for details).
(click)	The event emitted when the link is clicked.

🚧
Note
The tags used can be changed with the Container property. Only Ionic component names (beginning with ion- prefix) can be used if the Ionic mode is chosen.
For example, ion-text allows using Ionic features such as Color, Mode, or Router Direction.

Ionic Preset Mode Properties

The list of displayed properties can be expanded by choosing the Ionic Preset mode:

Property Name	Property Description
Container	Ionic component used as the link (options: ion-text, ion-label, ion-note, or ion-badge).
Router Direction	When using a router, specifies the transition direction when navigating to another page using `href`: back, forward, root.

Custom Preset Mode Properties

The Custom Preset Mode properties are:

Property Name	Property Description
Href	Contains a URL or URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
Container	HTML tag used for the link: a, p, span, div.
Target	Specifies where to display the linked URL. Only applies when an href is provided: Blank, Self, Parent, Top.
Rel	Specifies the relationship of the target object to the link object.

Styles Properties

Under the Styles tab, links can be styled with several attributes:

Property Name	Property Description
Text Color	Select CSS color from available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Font Size	Enter font size in `px`, `%`, `em`, `vh`, and `vw`.
Font Weight	Set the weight (or boldness) of the font: Normal or Bold.
Line Height	Set the height of a line box in `px`, `%`, `em`, `vh`, and `vw`. Commonly used to set the distance between lines of text.
Font Style	Set whether a font should be styled with a Normal or Italic face.
Text Decoration	Set the appearance of decorative lines on text using the group of predefined buttons: • None - specifies no line for the text • Underline - specifies that the line will be displayed under the text • Line-through - specifies that the line will be displayed through the text

Updated 17 days ago