• 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
19Since API version 9, this API is supported in ArkTS widgets.
20
21
22## Events
23
24The universal events and gestures are not supported. Only the following events are supported.
25
26| Name| Description|
27| -------- | -------- |
28| onInc(event: () =&gt; void) | Invoked when the number of monitored objects is increased.<br>Since API version 9, this API is supported in ArkTS widgets.|
29| onDec(event: () =&gt; void) | Invoked when the number of monitored objects is decreased.<br>Since API version 9, this API is supported in ArkTS widgets.|
30
31
32## Example
33
34```ts
35// xxx.ets
36@Entry
37@Component
38struct CounterExample {
39  @State value: number = 0
40
41  build() {
42    Column() {
43      Counter() {
44        Text(this.value.toString())
45      }.margin(100)
46      .onInc(() => {
47        this.value++
48      })
49      .onDec(() => {
50        this.value--
51      })
52    }.width("100%")
53  }
54}
55```
56
57![en-us_image_0000001212378424](figures/en-us_image_0000001212378424.gif)
58