• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Show/Hide Event
2
3The show/hide event is triggered when a component is mounted or unmounted from the component tree. A component appears when mounted to the component tree and disappears when unmounted from the component tree.
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## onAppear
10
11onAppear(event: () => void)
12
13Triggered when the component is displayed.
14
15**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets.
16
17**System capability**: SystemCapability.ArkUI.ArkUI.Full
18
19## onDisAppear
20
21onDisAppear(event: () => void)
22
23Triggered when the component is hidden.
24
25**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets.
26
27**System capability**: SystemCapability.ArkUI.ArkUI.Full
28
29
30## Example
31
32```ts
33// xxx.ets
34import promptAction from '@ohos.promptAction'
35
36@Entry
37@Component
38struct AppearExample {
39  @State isShow: boolean = true
40  @State changeAppear: string = 'Show/Hide'
41  private myText: string = 'Text for onAppear'
42
43  build() {
44    Column() {
45      Button(this.changeAppear)
46        .onClick(() => {
47          this.isShow = !this.isShow
48        }).margin(15)
49      if (this.isShow) {
50        Text(this.myText).fontSize(26).fontWeight(FontWeight.Bold)
51          .onAppear(() => {
52            promptAction.showToast({
53              message: 'Text shown.',
54              duration: 2000
55            })
56          })
57          .onDisAppear(() => {
58            promptAction.showToast({
59              message: 'Text hidden.',
60              duration: 2000
61            })
62          })
63      }
64    }.padding(30).width('100%')
65  }
66}
67```
68
69![en-us_image_0000001219864151](figures/en-us_image_0000001219864151.gif)
70