1# @ohos.arkui.advanced.Counter (Counter) 2 3A counter is a component used to accurately adjust values. 4 5> **NOTE** 6> 7> This component is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version. 8 9## Modules to Import 10 11``` 12import {CounterType, CounterComponent, CounterOptions, DateData} from '@ohos.arkui.advanced.Counter'; 13``` 14 15## Child Components 16 17Not supported 18 19## CounterComponent 20 21CounterComponent({ options: CounterOptions } ) 22 23Defines a counter. 24 25**Decorator**: @Component 26 27**System capability**: SystemCapability.ArkUI.ArkUI.Full 28 29**Parameters** 30 31| Name | Type | Mandatory| Decorator| Description | 32| ------- | --------------------------------- | ---- | ---------- | ----------------------- | 33| options | [CounterOptions](#counteroptions) | Yes | @Prop | Parameters of the counter.| 34 35## CounterOptions 36 37Defines the type and style parameters of the counter. 38 39**System capability**: SystemCapability.ArkUI.ArkUI.Full 40 41| Name | Type | Mandatory | Description | 42| ----------- | ---------- | ------| --------------------------------- | 43| type | [CounterType](#countertype) | Yes | Type of the current counter.| 44| numberOptions | [NumberStyleOptions](#numberstyleoptions) | No | Parameters of the number style counter.| 45| inlineOptions | [InlineStyleOptions](#inlinestyleoptions) | No| Parameters of the inline number style counter. | 46| dateOptions | [DateStyleOptions](#datestyleoptions) | No| Parameters of the inline date style counter.| 47 48A counter type must go with parameters of the matching counter style. Below is a mapping between the counter types and counter styles. 49 50| Counter Type | Counter Style | 51| ----------------------- | ------------------ | 52| CounterType.LIST | NumberStyleOptions | 53| CounterType.COMPACT | NumberStyleOptions | 54| CounterType.INLINE | InlineStyleOptions | 55| CounterType.INLINE_DATE | DateStyleOptions | 56 57## CounterType 58 59Enumerates the counter types. 60 61**System capability**: SystemCapability.ArkUI.ArkUI.Full 62 63| Name | Description | 64| ----------- | --------------------------- | 65| LIST | List counter. | 66| COMPACT | Compact counter. | 67| INLINE | Inline number counter.| 68| INLINE_DATE | Inline date counter. | 69 70## CommonOptions 71 72Defines common attributes and events of counters. 73 74**System capability**: SystemCapability.ArkUI.ArkUI.Full 75 76 77| Name | Type | Mandatory| Default Value| Description | 78| --------------- | ------------------------- | ---- | ------ | ------------------------------------------------------------ | 79| focusable | boolean | No | true | Whether the counter is focusable. | 80| step | number | No | 1 | Step of the counter.<br>Value range: an integer greater than or equal to 1. | 81| onHoverIncrease | (isHover: boolean) =>void | No | - | Callback invoked when the mouse pointer is moved over or away from the Increase button of the counter.<br>**isHover**: whether the mouse pointer hovers over the component. The value **true** means that the mouse pointer enters the component, and the value **false** means that the mouse pointer leaves the component.| 82| onHoverDecrease | (isHover: boolean) =>void | No | - | Callback invoked when the mouse pointer is moved over or away from the Decrease button of the counter.<br>**isHover**: whether the mouse pointer hovers over the component. The value **true** means that the mouse pointer enters the component, and the value **false** means that the mouse pointer leaves the component.| 83 84## InlineStyleOptions 85 86Defines the attributes and events of the inline number style counter. 87 88Inherited from [CommonOptions](#commonoptions). 89 90**System capability**: SystemCapability.ArkUI.ArkUI.Full 91 92| Name | Type | Mandatory| Default Value| Description | 93| --------- | ---------------------- | ---- | ------ | ------------------------------------------------------ | 94| value | number | No | 0 | Initial value of the counter. | 95| min | number | No | 0 | Minimum value of the counter. | 96| max | number | No | 999 | Maximum value of the counter. | 97| textWidth | number | No | 0 | Text width of the counter. | 98| onChange | (value: number) =>void | No | - | Callback invoked when the value changes. The current value is returned.<br>**value**: current value.| 99 100## NumberStyleOptions 101 102Defines the attributes and events of the number style counter. 103 104Inherited from [InlineStyleOptions](#inlinestyleoptions). 105 106**System capability**: SystemCapability.ArkUI.ArkUI.Full 107 108| Name | Type | Mandatory| Default Value| Description | 109| --------------- | ------------------------------------------------------------ | ---- | ------ | --------------------------------------------- | 110| label | [ResourceStr](ts-types.md#resourcestr) | No | - | Label of the counter. | 111| onFocusIncrease | () =>void | No | - | Callback invoked when the Increase button of the counter gains focus.| 112| onFocusDecrease | () =>void | No | - | Callback invoked when the Decrease button of the counter gains focus.| 113| onBlurIncrease | () =>void | No | - | Callback invoked when the Increase button of the counter loses focus.| 114| onBlurDecrease | () =>void | No | - | Callback invoked when the Decrease button of the counter loses focus.| 115 116## DateStyleOptions 117 118Defines the attributes and events of the inline date style counter. 119 120Inherited from [CommonOptions](#commonoptions). 121 122**System capability**: SystemCapability.ArkUI.ArkUI.Full 123 124| Name | Type | Mandatory| Default Value| Description | 125| ------------ | ----------------------------------- | ---- | ------ | --------------------------------------------------------- | 126| year | number | No | 1 | Initial year of the counter. | 127| month | number | No | 1 | Initial month of the counter. | 128| day | number | No | 1 | Initial day of the counter. | 129| onDateChange | (date: [DateData](#datedata))=>void | No | - | Callback invoked when the date changes. The current date is returned.<br>**date**: current date.| 130 131## DateData 132 133Defines common date attributes and methods. 134 135**System capability**: SystemCapability.ArkUI.ArkUI.Full 136 137| Name | Type | Description | 138| ---------- | ------ | ---------------------------- | 139| year | number | Initial year of the counter. | 140| month | number | Initial month of the counter. | 141| day | number | Initial day of the counter. | 142| toString() | string | Current date.| 143 144## Example 145 146### Example 1 147 148```ts 149import {CounterType, CounterComponent} from '@ohos.arkui.advanced.Counter'; 150 151@Entry 152@Component 153struct ListCounterExample { 154 build() { 155 Column() { 156 // List counter 157 CounterComponent({ options: { 158 type: CounterType.LIST, 159 numberOptions: { 160 label: "Price", 161 min: 0, 162 value: 5, 163 max: 10, 164 } 165 } 166 }) 167 } 168 } 169} 170``` 171 172 173### Example 2 174```ts 175import {CounterType, CounterComponent} from '@ohos.arkui.advanced.Counter'; 176 177@Entry 178@Component 179struct CompactCounterExample { 180 build() { 181 Column() { 182 // Compact counter 183 CounterComponent({ options: { 184 type: CounterType.COMPACT, 185 numberOptions: { 186 label: "Quantity", 187 value: 10, 188 min: 0, 189 max: 100, 190 step: 10 191 } 192 } 193 }) 194 } 195 } 196} 197``` 198 199### Example 3 200```ts 201import {CounterType, CounterComponent} from '@ohos.arkui.advanced.Counter'; 202 203@Entry 204@Component 205struct NumberStyleExample { 206 build() { 207 Column() { 208 // Inline number counter 209 CounterComponent({ options: { 210 type: CounterType.INLINE, 211 inlineOptions: { 212 value: 100, 213 min: 10, 214 step: 2, 215 max: 1000, 216 textWidth: 100, 217 onChange: (value: number) => { 218 console.log("onDateChange Date: " + value.toString()); 219 } 220 } } 221 }) 222 } 223 } 224} 225``` 226 227### Example 4 228```ts 229import {CounterType, CounterComponent, DateData} from '@ohos.arkui.advanced.Counter'; 230@Entry 231@Component 232struct DataStyleExample { 233 build() { 234 Column() { 235 // Inline date counter 236 CounterComponent({ options: { 237 type: CounterType.INLINE_DATE, 238 dateOptions: { 239 year: 2016, 240 onDateChange: (date: DateData) => { 241 console.log("onDateChange Date: " + date.toString()); 242 } 243 } } 244 }) 245 } 246 } 247} 248``` 249 250
