• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Enable/Disable Control
2
3You can enable or disable a component to control whether it responds to user interactions. When a component is enabled, it can respond to the following events:
4
5- [Click event](ts-universal-events-click.md)
6- [Touch event](ts-universal-events-touch.md)
7- [Drag and drop event](ts-universal-events-drag-drop.md)
8- [Key event](ts-universal-events-key.md)
9- [Focus event](ts-universal-focus-event.md)
10- [Mouse event](ts-universal-mouse-key.md)
11- [Axis event](ts-universal-events-axis.md)
12- [Hover event](ts-universal-events-hover.md)
13- [Accessibility hover event](ts-universal-accessibility-hover-event.md)
14- [Gesture event](ts-gesture-settings.md)
15- [Focus axis event](ts-universal-events-focus_axis.md)
16- [Crown event](ts-universal-events-crown.md)
17
18>  **NOTE**
19>
20>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
21>
22>  The **enabled** attribute takes effect only when the component is pressed. It does not work when the component is interacting with the user.
23
24## enabled
25
26enabled(value: boolean)
27
28Sets whether the component responds to user interactions.
29
30**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets.
31
32**Atomic service API**: This API can be used in atomic services since API version 11.
33
34**System capability**: SystemCapability.ArkUI.ArkUI.Full
35
36**Parameters**
37
38| Name| Type   | Mandatory| Description                                                        |
39| ------ | ------- | ---- | ------------------------------------------------------------ |
40| value  | boolean | Yes  | Whether the component responds to user interactions, including clicks and touches. The value **true** means that the component responds to user interactions, and **false** means the opposite.<br>Default value: **true**.|
41
42
43## Example
44
45This example demonstrates how to use **enable** to set whether a button responds to user interactions.
46
47```ts
48// xxx.ets
49@Entry
50@Component
51struct EnabledExample {
52
53  build() {
54    Flex({ justifyContent: FlexAlign.SpaceAround }) {
55      // The component does not respond to clicks.
56      Button('disable').enabled(false).backgroundColor(0x317aff).opacity(0.4)
57      Button('enable').backgroundColor(0x317aff)
58    }
59    .width('100%')
60    .padding({ top: 5 })
61  }
62}
63```
64
65![en-us_image_0000001212218428](figures/en-us_image_0000001212218428.gif)
66