• 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## Attributes
22
23[Universal attributes](ts-universal-attributes-size.md) are supported.
24
25
26## Events
27
28The universal events and gestures are not supported. Only the following events are supported.
29
30| Name| Description|
31| -------- | -------- |
32| 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.|
33| 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.|
34
35
36## Example
37
38```ts
39// xxx.ets
40@Entry
41@Component
42struct CounterExample {
43  @State value: number = 0
44
45  build() {
46    Column() {
47      Counter() {
48        Text(this.value.toString())
49      }.margin(100)
50      .onInc(() => {
51        this.value++
52      })
53      .onDec(() => {
54        this.value--
55      })
56    }.width("100%")
57  }
58}
59```
60
61![en-us_image_0000001212378424](figures/en-us_image_0000001212378424.gif)
62