1# advanced.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 '@kit.ArkUI'; 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**Atomic service API**: This API can be used in atomic services since API version 12. 28 29**System capability**: SystemCapability.ArkUI.ArkUI.Full 30 31**Parameters** 32 33| Name | Type | Mandatory| Decorator| Description | 34| ------- | --------------------------------- | ---- | ---------- | ----------------------- | 35| options | [CounterOptions](#counteroptions) | Yes | @Prop | Parameters of the counter.| 36 37## CounterOptions 38 39Defines the type and style parameters of the counter. 40 41**Atomic service API**: This API can be used in atomic services since API version 12. 42 43**System capability**: SystemCapability.ArkUI.ArkUI.Full 44 45| Name | Type | Mandatory | Description | 46| ----------- | ---------- | ------| --------------------------------- | 47| type | [CounterType](#countertype) | Yes | Type of the current counter.| 48| direction<sup>12+</sup> | [Direction](ts-appendix-enums.md#direction) | No| Layout direction.<br>Default value: **Direction.Auto**| 49| numberOptions | [NumberStyleOptions](#numberstyleoptions) | No | Parameters of the number style counter.| 50| inlineOptions | [InlineStyleOptions](#inlinestyleoptions) | No| Parameters of the inline number style counter.| 51| dateOptions | [DateStyleOptions](#datestyleoptions) | No| Parameters of the inline date style counter.| 52 53A counter type must go with parameters of the matching counter style. Below is a mapping between the counter types and counter styles. 54 55| Counter Type | Counter Style | 56| ----------------------- | ------------------ | 57| CounterType.LIST | NumberStyleOptions | 58| CounterType.COMPACT | NumberStyleOptions | 59| CounterType.INLINE | InlineStyleOptions | 60| CounterType.INLINE_DATE | DateStyleOptions | 61 62## CounterType 63 64Enumerates the counter types. 65 66**Atomic service API**: This API can be used in atomic services since API version 12. 67 68**System capability**: SystemCapability.ArkUI.ArkUI.Full 69 70| Name | Value | Description | 71| ----------- | ---- | --------------------------- | 72| LIST | 0 | List counter. | 73| COMPACT | 1 | Compact counter. | 74| INLINE | 2 | Inline number counter.| 75| INLINE_DATE | 3 | Inline date counter. | 76 77## CommonOptions 78 79Defines common attributes and events of counters. 80 81**Atomic service API**: This API can be used in atomic services since API version 12. 82 83**System capability**: SystemCapability.ArkUI.ArkUI.Full 84 85 86| Name | Type | Mandatory| Description | 87| --------------- | ------------------------- | ---- | ------------------------------------------------------------ | 88| focusable | boolean | No | Whether the counter is focusable.<br>**NOTE**<br>This attribute takes effect for the number style counter.<br>Default value: **true**<br>**true**: The counter is focusable.<br>**false**: The counter is not focusable.| 89| step | number | No | Step of the counter.<br>Value range: an integer greater than or equal to 1.<br>Default value: **1**| 90| 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.| 91| 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.| 92 93## InlineStyleOptions 94 95Defines the attributes and events of the inline number style counter. 96 97Inherits from [CommonOptions](#commonoptions). 98 99**Atomic service API**: This API can be used in atomic services since API version 12. 100 101**System capability**: SystemCapability.ArkUI.ArkUI.Full 102 103| Name | Type | Mandatory| Description | 104| --------- | ---------------------- | ---- | ------------------------------------------------------ | 105| value | number | No | Initial value of the counter.<br>Default value: **0** | 106| min | number | No | Minimum value of the counter.<br>Default value: **0** | 107| max | number | No | Maximum value of the counter.<br>Default value: **999** | 108| textWidth | number | No | Text width of the counter.<br>Default value: **0** | 109| onChange | (value: number) =>void | No | Callback invoked when the value changes. The current value is returned.<br>**value**: current value.| 110 111## NumberStyleOptions 112 113Defines the attributes and events of the number style counter. 114 115Inherits from [InlineStyleOptions](#inlinestyleoptions). 116 117**Atomic service API**: This API can be used in atomic services since API version 12. 118 119**System capability**: SystemCapability.ArkUI.ArkUI.Full 120 121| Name | Type | Mandatory| Description | 122| --------------- | -------------------------------------- | ---- | --------------------------------------------- | 123| label | [ResourceStr](ts-types.md#resourcestr) | No | Label of the counter. | 124| onFocusIncrease | () =>void | No | Callback invoked when the increase button of the counter gains focus.| 125| onFocusDecrease | () =>void | No | Callback invoked when the decrease button of the counter gains focus.| 126| onBlurIncrease | () =>void | No | Callback invoked when the increase button of the counter loses focus.| 127| onBlurDecrease | () =>void | No | Callback invoked when the decrease button of the counter loses focus.| 128 129## DateStyleOptions 130 131Defines the attributes and events of the inline date style counter. 132 133Inherits from [CommonOptions](#commonoptions). 134 135**Atomic service API**: This API can be used in atomic services since API version 12. 136 137**System capability**: SystemCapability.ArkUI.ArkUI.Full 138 139| Name | Type | Mandatory| Description | 140| ------------ | ----------------------------------- | ---- | --------------------------------------------------------- | 141| year | number | No | Initial year of the counter.<br>Default value: **1** | 142| month | number | No | Initial month of the counter.<br>Default value: **1** | 143| day | number | No | Initial day of the counter.<br>Default value: **1** | 144| onDateChange | (date: [DateData](#datedata))=>void | No | Callback invoked when the date changes. The current date is returned.<br>**date**: current date.| 145 146## DateData 147 148Defines common date attributes and methods. 149 150**Atomic service API**: This API can be used in atomic services since API version 12. 151 152**System capability**: SystemCapability.ArkUI.ArkUI.Full 153 154| Name | Type | Read-Only| Optional| Description | 155| ----- | ------ | ---- | ---- | ------------------------ | 156| year | number | No | No | Initial year of the counter.| 157| month | number | No | No | Initial month of the counter.| 158| day | number | No | No | Initial day of the counter. | 159 160### constructor 161 162constructor(year: number, month: number, day: number) 163 164A constructor used to create a **DateData** object. 165 166**Atomic service API**: This API can be used in atomic services since API version 12. 167 168**System capability**: SystemCapability.ArkUI.ArkUI.Full 169 170| Name| Type| Description| 171| ---------- | ------ | ---------------------------- | 172| year | number | Initial year of the counter. | 173| month | number | Initial month of the counter. | 174| day | number | Initial day of the counter. | 175 176### toString 177 178toString(): string 179 180Current date. 181 182**Atomic service API**: This API can be used in atomic services since API version 12. 183 184**System capability**: SystemCapability.ArkUI.ArkUI.Full 185 186**Return value** 187 188| Type| Description| 189| -------- | -------- | 190| string | Current date.| 191 192## Example 193 194### Example 1: Implementing a List Counter 195 196This example implements a list counter by setting **type** to **CounterType.LIST** and configuring **numberOptions**. 197 198```ts 199import { CounterType, CounterComponent } from '@kit.ArkUI'; 200 201@Entry 202@Component 203struct ListCounterExample { 204 build() { 205 Column() { 206 // List counter 207 CounterComponent({ 208 options: { 209 type: CounterType.LIST, 210 numberOptions: { 211 label: "Price", 212 min: 0, 213 value: 5, 214 max: 10 215 } 216 } 217 }) 218 } 219 } 220} 221``` 222 223 224### Example 2: Implementing a Compact Counter 225 226This example implements a compact counter by setting **type** to **CounterType.COMPACT** and configuring **numberOptions**. 227 228```ts 229import { CounterType, CounterComponent } from '@kit.ArkUI'; 230 231@Entry 232@Component 233struct CompactCounterExample { 234 build() { 235 Column() { 236 // Compact counter 237 CounterComponent({ 238 options: { 239 type: CounterType.COMPACT, 240 numberOptions: { 241 label: "Quantity", 242 value: 10, 243 min: 0, 244 max: 100, 245 step: 10 246 } 247 } 248 }) 249 } 250 } 251} 252``` 253 254### Example 3: Implementing an Inline Number Counter 255 256This example implements an inline number counter by setting **type** to **CounterType.INLINE** and configuring **inlineOptions**. 257 258```ts 259import { CounterType, CounterComponent } from '@kit.ArkUI'; 260 261@Entry 262@Component 263struct NumberStyleExample { 264 build() { 265 Column() { 266 // Inline number counter 267 CounterComponent({ 268 options: { 269 type: CounterType.INLINE, 270 inlineOptions: { 271 value: 100, 272 min: 10, 273 step: 2, 274 max: 1000, 275 textWidth: 100, 276 onChange: (value: number) => { 277 console.log("onDateChange Date: " + value.toString()); 278 } 279 } 280 } 281 }) 282 } 283 } 284} 285``` 286 287### Example 4: Implementing an Inline Date Counter 288 289This example implements an inline date counter by setting **type** to **CounterType.INLINE_DATE** and configuring **dateOptions**, allowing for manual date input. 290 291```ts 292import { CounterType, CounterComponent, DateData } from '@kit.ArkUI'; 293 294@Entry 295@Component 296struct DataStyleExample { 297 build() { 298 Column() { 299 // Inline date counter 300 CounterComponent({ 301 options: { 302 type: CounterType.INLINE_DATE, 303 dateOptions: { 304 year: 2016, 305 onDateChange: (date: DateData) => { 306 console.log("onDateChange Date: " + date.toString()); 307 } 308 } 309 } 310 }) 311 } 312 } 313} 314``` 315 316 317### Example 5: Implementing a Mirrored Layout 318 319This example implements a mirrored layout for list, compact, inline number, and inline date counters by setting **direction**. 320 321```ts 322// xxx.ets 323import { CounterType, CounterComponent, DateData } from '@kit.ArkUI'; 324 325@Entry 326@Component 327struct CounterPage { 328 @State currentDirection: Direction = Direction.Rtl 329 330 build() { 331 Column({}) { 332 333 // List counter 334 CounterComponent({ 335 options: { 336 direction: this.currentDirection, 337 type: CounterType.LIST, 338 numberOptions: { 339 label: "Price", 340 min: 0, 341 value: 5, 342 max: 10, 343 } 344 } 345 }) 346 .width('80%') 347 348 // Compact counter 349 CounterComponent({ 350 options: { 351 direction: this.currentDirection, 352 type: CounterType.COMPACT, 353 numberOptions: { 354 label: "Quantity", 355 value: 10, 356 min: 0, 357 max: 100, 358 step: 10 359 } 360 } 361 }).margin({ top: 20 }) 362 363 // Inline number counter 364 CounterComponent({ 365 options: { 366 type: CounterType.INLINE, 367 direction: this.currentDirection, 368 inlineOptions: { 369 value: 100, 370 min: 10, 371 step: 2, 372 max: 1000, 373 textWidth: 100, 374 onChange: (value: number) => { 375 console.log("onDateChange Date: " + value.toString()); 376 } 377 } 378 } 379 }).margin({ top: 20 }) 380 // Inline date counter 381 CounterComponent({ 382 options: { 383 direction: this.currentDirection, 384 type: CounterType.INLINE_DATE, 385 dateOptions: { 386 year: 2024, 387 onDateChange: (date: DateData) => { 388 console.log("onDateChange Date: " + date.toString()); 389 } 390 } 391 } 392 }).margin({ top: 20 }) 393 } 394 .width('100%') 395 .height('100%') 396 .justifyContent(FlexAlign.Center) 397 .alignItems(HorizontalAlign.Center) 398 } 399} 400``` 401 402
