• 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
10## Events
11
12| Name                                            | Bubbling Supported| Description                                                    |
13| ------------------------------------------------ | -------- | ------------------------------------------------------------ |
14| onAppear(event: () =&gt; void)    | No      | Triggered when the component is displayed.<br>Since API version 9, this API is supported in ArkTS widgets.|
15| onDisAppear(event: () =&gt; void) | No      | Triggered when the component is hidden.<br>Since API version 9, this API is supported in ArkTS widgets.|
16
17
18## Example
19
20```ts
21// xxx.ets
22import promptAction from '@ohos.promptAction'
23
24@Entry
25@Component
26struct AppearExample {
27  @State isShow: boolean = true
28  @State changeAppear: string = 'Hide Text'
29  private myText: string = 'Text for onAppear'
30
31  build() {
32    Column() {
33      Button(this.changeAppear)
34        .onClick(() => {
35          this.isShow = !this.isShow
36        }).margin(15)
37      if (this.isShow) {
38        Text(this.myText).fontSize(26).fontWeight(FontWeight.Bold)
39          .onAppear(() => {
40            this.changeAppear = 'Hide Text'
41            promptAction.showToast({
42              message: 'The text is shown',
43              duration: 2000
44            })
45          })
46          .onDisAppear(() => {
47            this.changeAppear = 'Show Text'
48            promptAction.showToast({
49              message: 'The text is hidden',
50              duration: 2000
51            })
52          })
53      }
54    }.padding(30).width('100%')
55  }
56}
57```
58
59![en-us_image_0000001219864151](figures/en-us_image_0000001219864151.gif)
60