• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Visibility
2
3The visibility attribute controls whether a component is visible.
4
5>  **NOTE**
6>
7> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8
9## Attributes
10
11| Name        | Type                       | Description                                        |
12| ---------- | ---------------------------- | ------------------------------------------ |
13| visibility | [Visibility](ts-appendix-enums.md#visibility) | Whether the component is visible. Note that even if a component is invisible, it still needs to be re-created when the page is refreshed. Therefore, you are advised to use [conditional rendering](../../quick-start/arkts-rendering-control-ifelse.md) instead under scenarios where consistently high performance is required.<br>Default value: **Visibility.Visible**<br>Since API version 9, this API is supported in ArkTS widgets.|
14
15
16## Example
17
18```ts
19// xxx.ets
20@Entry
21@Component
22struct VisibilityExample {
23  build() {
24    Column() {
25      Column() {
26        // The component is hidden and does not take up space in the layout.
27        Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)
28        Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE)
29
30        // The component is hidden but takes up space in the layout.
31        Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC)
32        Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE)
33
34        // The component is visible, which is the default display mode.
35        Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC)
36        Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE)
37      }.width('90%').border({ width: 1 })
38    }.width('100%').margin({ top: 5 })
39  }
40}
41```
42
43![visibility.png](figures/visibility.png)
44