Overlay

icon-note.gif NOTE This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

Required Permissions

None

Attributes

Name Type Default Value Description
overlay title: string,
options: {
align?: Alignment,
offset?: {x: number, y: number}
}
{
align: Alignment.Center,
offset: {0, 0}
}
Mask added to the component. The mask has the same layout as the component.

Example

@Entry
@Component
struct OverlayExample {
  build() {
    Column() {
      Column() {
        Text('floating layer')
          .fontSize(12).fontColor(0xCCCCCC).maxLines(1)
        Column() {
          Image($r('app.media.img'))
            .width(240).height(240)
            .overlay("Winter is a beautiful season, especially when it snows.", { align: Alignment.Bottom, offset: { x: 0, y: -15 } })
        }.border({ color: Color.Black, width: 2 })
      }.width('100%')
    }.padding({ top: 20 })
  }
}

en-us_image_0000001212058472