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 23In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 24 25| Name | Type | Description | 26| --------------------------- | ---------------------------------------- | ---------------------------------------- | 27| enableInc<sup>10+</sup> | boolean | Whether the plus button is enabled.<br>Default value: **true** | 28| enableDec<sup>10+</sup> | boolean | Whether the minus button is enabled.<br>Default value: **true**| 29 30## Events 31 32In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 33 34| Name| Description| 35| -------- | -------- | 36| onInc(event: () => void) | Invoked when the number of monitored objects is increased.<br>Since API version 9, this API is supported in ArkTS widgets.| 37| onDec(event: () => void) | Invoked when the number of monitored objects is decreased.<br>Since API version 9, this API is supported in ArkTS widgets.| 38 39 40## Example 41 42```ts 43// xxx.ets 44@Entry 45@Component 46struct CounterExample { 47 @State value: number = 0 48 49 build() { 50 Column() { 51 Counter() { 52 Text(this.value.toString()) 53 }.margin(100) 54 .onInc(() => { 55 this.value++ 56 }) 57 .onDec(() => { 58 this.value-- 59 }) 60 }.width("100%") 61 } 62} 63``` 64 65 66
