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: () => void) | No | Triggered when the component is displayed.<br>Since API version 9, this API is supported in ArkTS widgets.| 15| onDisAppear(event: () => 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 = 'Show/Hide' 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 promptAction.showToast({ 41 message: 'Text shown.', 42 duration: 2000 43 }) 44 }) 45 .onDisAppear(() => { 46 promptAction.showToast({ 47 message: 'Text hidden.', 48 duration: 2000 49 }) 50 }) 51 } 52 }.padding(30).width('100%') 53 } 54} 55``` 56 57 58
