• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Counter
2
3The **Counter** component provides an operation to increase or decrease the number.
4
5>  **NOTE**
6>
7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## Child Components
11
12Supported
13
14
15## APIs
16
17Counter()
18
19**Widget capability**: This API can be used in ArkTS widgets since API version 9.
20
21**Atomic service API**: This API can be used in atomic services since API version 11.
22
23**System capability**: SystemCapability.ArkUI.ArkUI.Full
24
25## Attributes
26
27In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported.
28
29### enableInc<sup>10+</sup>
30
31enableInc(value: boolean)
32
33Sets whether to enable the increment button.
34
35**Atomic service API**: This API can be used in atomic services since API version 11.
36
37**System capability**: SystemCapability.ArkUI.ArkUI.Full
38
39**Parameters**
40
41| Name| Type   | Mandatory| Description                                 |
42| ------ | ------- | ---- | ------------------------------------- |
43| value  | boolean | Yes  | Whether to enable the increment button.<br>Default value: **true**|
44
45### enableDec<sup>10+</sup>
46
47enableDec(value: boolean)
48
49Sets whether to enable the decrement button.
50
51**Atomic service API**: This API can be used in atomic services since API version 11.
52
53**System capability**: SystemCapability.ArkUI.ArkUI.Full
54
55**Parameters**
56
57| Name| Type   | Mandatory| Description                                 |
58| ------ | ------- | ---- | ------------------------------------- |
59| value  | boolean | Yes  | Whether to enable the decrement button.<br>Default value: **true**|
60
61## Events
62
63In addition to the [universal events](ts-component-general-events.md), the following events are supported.
64
65### onInc
66
67onInc(event: () =&gt; void)
68
69Invoked when the value increases.
70
71**Widget capability**: This API can be used in ArkTS widgets since API version 9.
72
73**Atomic service API**: This API can be used in atomic services since API version 11.
74
75**System capability**: SystemCapability.ArkUI.ArkUI.Full
76
77### onDec
78
79onDec(event: () =&gt; void)
80
81Invoked when the value decreases.
82
83**Widget capability**: This API can be used in ArkTS widgets since API version 9.
84
85**Atomic service API**: This API can be used in atomic services since API version 11.
86
87**System capability**: SystemCapability.ArkUI.ArkUI.Full
88
89
90
91
92## Example
93
94This example shows the basic usage of the **Counter** component. Users can touch the **+** or **-** button to adjust the value.
95
96```ts
97// xxx.ets
98@Entry
99@Component
100struct CounterExample {
101  @State value: number = 0
102
103  build() {
104    Column() {
105      Counter() {
106        Text(this.value.toString())
107      }.margin(100)
108      .onInc(() => {
109        this.value++
110      })
111      .onDec(() => {
112        this.value--
113      })
114    }.width("100%")
115  }
116}
117```
118
119![en-us_image_0000001212378424](figures/en-us_image_0000001212378424.gif)
120