• 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## visibility
10
11visibility(value: Visibility)
12
13Sets the visibility of the component.
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**Parameters**
20
21| Name| Type                                         | Mandatory| Description                                                        |
22| ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ |
23| value  | [Visibility](ts-appendix-enums.md#visibility) | Yes  | Whether the component is visible. When appropriate, consider using [conditional rendering](../../quick-start/arkts-rendering-control-ifelse.md) as a substitute.<br>Default value: **Visibility.Visible**|
24
25
26## Example
27
28```ts
29// xxx.ets
30@Entry
31@Component
32struct VisibilityExample {
33  build() {
34    Column() {
35      Column() {
36        // The component is hidden and does not take up space in the layout.
37        Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)
38        Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE)
39
40        // The component is hidden but takes up space in the layout.
41        Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC)
42        Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE)
43
44        // The component is visible, which is the default display mode.
45        Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC)
46        Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE)
47      }.width('90%').border({ width: 1 })
48    }.width('100%').margin({ top: 5 })
49  }
50}
51```
52
53![visibility.png](figures/visibility.png)
54