• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Obscuring
2
3When needed, you can obscure content of a component.
4
5>  **NOTE**
6>
7> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## Attributes
11
12
13| Name   | Type                                    | Description                                 |
14| -----| ------------------------------------------ | ------------------------------------ |
15| obscured | Array<[ObscuredReasons](ts-appendix-enums.md#obscuredreasons10)> | How the component content is obscured.<br>Default value: **[]**<br>This API is supported in ArkTS widgets.<br>This API only works for the [\<Image>](ts-basic-components-image.md) and [\<Text>](ts-basic-components-text.md) components.<br>**NOTE**<br>To obscure an image when it is being loaded, you must set the width and height of the **\<Image>** component. |
16
17## Example
18
19```ts
20// xxx.ets
21@Entry
22@Component
23struct ObscuredExample {
24  build() {
25    Row() {
26      Column() {
27        Text('Text not set obscured attribute').fontSize(10).fontColor(Color.Black)
28        Text('This is an example for text obscured attribute.')
29          .fontSize(30)
30          .width('600px')
31          .fontColor(Color.Black)
32          .border({ width: 1 })
33        Text('Image not set obscured attribute').fontSize(10).fontColor(Color.Black)
34        Image($r('app.media.icon'))
35          .width('200px')
36          .height('200px')
37        Text('Text set obscured attribute').fontSize(10).fontColor(Color.Black)
38        Text('This is an example for text obscured attribute.')
39          .fontSize(30)
40          .width('600px')
41          .fontColor(Color.Black)
42          .border({ width: 1 })
43          .obscured([ObscuredReasons.PLACEHOLDER])
44        Text('Image set obscured attribute').fontSize(10).fontColor(Color.Black)
45        Image($r('app.media.icon'))
46          .width('200px')
47          .height('200px')
48          .obscured([ObscuredReasons.PLACEHOLDER])
49      }
50      .width('100%')
51    }
52    .height('100%')
53  }
54}
55```
56
57![obscured](figures/obscured.png)
58