• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Hyperlink
2
3The **Hyperlink** component implements a link from a location in the component to another location.
4
5>  **NOTE**
6>
7>  - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8>  - This component must be used with the system browser.
9
10## Required Permissions
11
12If Internet access is required, you need to apply for the **ohos.permission.INTERNET** permission. For details about how to apply for a permission, see [Declaring Permissions](../../../security/AccessToken/declare-permissions.md).
13
14## Child Components
15
16This component can contain the [Image](ts-basic-components-image.md) child component.
17
18## APIs
19
20Hyperlink(address: string | Resource, content?: string | Resource)
21
22**Atomic service API**: This API can be used in atomic services since API version 11.
23
24**System capability**: SystemCapability.ArkUI.ArkUI.Full
25
26**Parameters**
27
28| Name| Type| Mandatory| Description|
29| -------- | -------- | -------- | -------- |
30| address | string \| [Resource](ts-types.md#resource) | Yes| Web page to which the hyperlink is redirected.|
31| content | string \| [Resource](ts-types.md#resource) | No| Text displayed in the hyperlink.<br>**NOTE**<br>If this component has child components, the hyperlink text is not displayed.|
32
33## Attributes
34
35In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported.
36
37### color
38
39color(value: Color | number | string | Resource)
40
41Sets the color of the hyperlink text.
42
43**Atomic service API**: This API can be used in atomic services since API version 11.
44
45**System capability**: SystemCapability.ArkUI.ArkUI.Full
46
47**Parameters**
48
49| Name| Type                                                        | Mandatory| Description              |
50| ------ | ------------------------------------------------------------ | ---- | ------------------ |
51| value  | [Color](ts-appendix-enums.md#color) \| number \| string \| [Resource](ts-types.md#resource) | Yes  | Color of the hyperlink text<br><!--RP1-->Default value: **'#ff007dff'**.<br>Default value on wearable devices: **'ff1f71ff'**.<!--RP1End-->
52
53## Example
54
55This example shows how to create hyperlinks with both images and text that can be clicked to navigate to a specified URL.
56
57```ts
58@Entry
59@Component
60struct HyperlinkExample {
61  build() {
62    Column() {
63      Column() {
64        Hyperlink('https://example.com/') {
65          Image($r('app.media.bg'))
66            .width(200)
67            .height(100)
68        }
69      }
70
71      Column() {
72        Hyperlink('https://example.com/', 'Go to the developer website') {
73        }
74        .color(Color.Blue)
75      }
76    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
77  }
78}
79```
80
81![hyperlink](figures/hyperlink.PNG)
82