Link
Overview of the Link Component
The Link component is used for navigating to a specified link. The component is based on Angular routing.
To enable using the Link component, the project routes should be specified. They can be defined in the Project settings under the Routing tab. The specified router names will be displayed in the dropdown list of the Route Name property.
Properties
Important Note!
This document lists the properties that are specific to this particular UI component.
To check for the properties common for most UI components, please check the General components document.
By default, the Link component has the following properties:
Common Properties
| Property Name | Property Description |
|---|---|
| Route Name | List of routes names defined on the Routing tab. |
| Route Params | Set the value of Route Params to pass some parameters in URL at navigation. Several values should be separated with commas (param1, param2, ...). |
| Preset Mode | Specify a mode with the properties that can be set. There are different tags to be used for the link depending on the chosen Preset mode: Ionic or Custom that define what Container values will be preselected (see below for more details). |
| (click) | The event emitted when the link is clicked. |
Using tags can be changed with the Container property. Only Ionic components (beginning with
ion-prefix) names can be used if the Ionic mode is chosen.
For example, ion-text allows using such Ionic features as Color, Mode or Router Direction.
The list of displayed properties can be expanded by choosing another Preset mode:
Ionic:
| 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. |
The Custom Preset Mode properties are the following:
| Property Name | Property Description |
|---|---|
| Href | The property contains a URL or a 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 | Specify where to display the linked URL. Only applies when an href is provided: Blank, Self, Parent, Top. |
| Rel | Specify the relationship of the target object to the link object. |
Styles Properties
Under the Styles tab, links can be styled with several attributes to look like in a specific way:
| Property Description | Property Description |
|---|---|
| Text Color | Select CSS color from the 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. It's 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 by using the group of predefined buttons: specifies no line for the text specifies that the line will be displayed under the text specifies that the line will be displayed through the text. |
Updated about 5 hours ago