• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Overlay
2
3You can set overlay text for a component.
4
5>  **NOTE**
6>
7>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8
9## Attributes
10
11| Name     | Type                                    | Default Value                                     | Description                                      |
12| ------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
13| overlay | value: string &#124; [CustomBuilder](../arkui-ts/ts-types.md#custombuilder8)<sup>10+</sup>,<br>options?: {<br>align?: [Alignment](ts-appendix-enums.md#alignment), <br>offset?: {x?: number, y?: number}<br>} | {<br>align: Alignment.Center,<br>offset: {0, 0}<br>} | Overlay of mask text or a custom component added to the component.<br> **value**: mask text content or custom component constructor.<br>**options**: position of the overlay. **align** indicates the position of the overlay relative to the component. [offset](ts-universal-attributes-location.md) indicates the offset of the overlay relative to the upper left corner of itself. By default, the overlay is in the upper left corner of the component.<br>If both **align** and **offset** are set, the overlay is first positioned relative to the component, and then offset relative to the upper left corner of itself.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>When the overlay is a custom component, it cannot obtain focus through sequential keyboard navigation.|
14
15## Example
16
17### Example 1
18
19```ts
20// xxx.ets
21@Entry
22@Component
23struct OverlayExample {
24  build() {
25    Column() {
26      Column() {
27        Text('floating layer')
28          .fontSize(12).fontColor(0xCCCCCC).maxLines(1)
29        Column() {
30          Image($r('app.media.img'))
31            .width(240).height(240)
32            .overlay("Winter is a beautiful season, especially when it snows.", {
33              align: Alignment.Bottom,
34              offset: { x: 0, y: -15 }
35            })
36        }.border({ color: Color.Black, width: 2 })
37      }.width('100%')
38    }.padding({ top: 20 })
39  }
40}
41```
42
43![en-us_image_0000001212058472](figures/en-us_image_0000001212058472.png)
44
45### Example 2
46
47```ts
48// xxx.ets
49@Entry
50@Component
51struct OverlayExample {
52  @Builder OverlayNode() {
53    Column() {
54      Image($r('app.media.img1'))
55      Text("This is overlayNode").fontSize(20).fontColor(Color.White)
56    }.width(180).height(180).alignItems(HorizontalAlign.Center)
57  }
58
59  build() {
60    Column() {
61      Image($r('app.media.img2'))
62        .overlay(this.OverlayNode(), { align: Alignment.Center })
63        .objectFit(ImageFit.Contain)
64    }.width('100%')
65    .border({ color: Color.Black, width: 2 }).padding(20)
66  }
67}
68```
69![en-us_image_0000001210111632](figures/en-us_image_0000001210111632.png)
70