@ohos.arkui.advanced.Counter (Counter)

A counter is a component used to accurately adjust values.

NOTE

This component is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version.

Modules to Import

import {CounterType, CounterComponent, CounterOptions, DateData} from '@ohos.arkui.advanced.Counter';

Child Components

Not supported

CounterComponent

CounterComponent({ options: CounterOptions } )

Defines a counter.

Decorator: @Component

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Decorator	Description
options	CounterOptions	Yes	@Prop	Parameters of the counter.

CounterOptions

Defines the type and style parameters of the counter.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Mandatory	Description
type	CounterType	Yes	Type of the current counter.
numberOptions	NumberStyleOptions	No	Parameters of the number style counter.
inlineOptions	InlineStyleOptions	No	Parameters of the inline number style counter.
dateOptions	DateStyleOptions	No	Parameters of the inline date style counter.

A counter type must go with parameters of the matching counter style. Below is a mapping between the counter types and counter styles.

Counter Type	Counter Style
CounterType.LIST	NumberStyleOptions
CounterType.COMPACT	NumberStyleOptions
CounterType.INLINE	InlineStyleOptions
CounterType.INLINE_DATE	DateStyleOptions

CounterType

Enumerates the counter types.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Description
LIST	List counter.
COMPACT	Compact counter.
INLINE	Inline number counter.
INLINE_DATE	Inline date counter.

CommonOptions

Defines common attributes and events of counters.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Mandatory	Default Value	Description
focusable	boolean	No	true	Whether the counter is focusable.
step	number	No	1	Step of the counter. Value range: an integer greater than or equal to 1.
onHoverIncrease	(isHover: boolean) =>void	No	-	Callback invoked when the mouse pointer is moved over or away from the Increase button of the counter. 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.
onHoverDecrease	(isHover: boolean) =>void	No	-	Callback invoked when the mouse pointer is moved over or away from the Decrease button of the counter. 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.

InlineStyleOptions

Defines the attributes and events of the inline number style counter.

Inherited from CommonOptions.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Mandatory	Default Value	Description
value	number	No	0	Initial value of the counter.
min	number	No	0	Minimum value of the counter.
max	number	No	999	Maximum value of the counter.
textWidth	number	No	0	Text width of the counter.
onChange	(value: number) =>void	No	-	Callback invoked when the value changes. The current value is returned. value: current value.

NumberStyleOptions

Defines the attributes and events of the number style counter.

Inherited from InlineStyleOptions.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Mandatory	Default Value	Description
label	ResourceStr	No	-	Label of the counter.
onFocusIncrease	() =>void	No	-	Callback invoked when the Increase button of the counter gains focus.
onFocusDecrease	() =>void	No	-	Callback invoked when the Decrease button of the counter gains focus.
onBlurIncrease	() =>void	No	-	Callback invoked when the Increase button of the counter loses focus.
onBlurDecrease	() =>void	No	-	Callback invoked when the Decrease button of the counter loses focus.

DateStyleOptions

Defines the attributes and events of the inline date style counter.

Inherited from CommonOptions.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Mandatory	Default Value	Description
year	number	No	1	Initial year of the counter.
month	number	No	1	Initial month of the counter.
day	number	No	1	Initial day of the counter.
onDateChange	(date: DateData)=>void	No	-	Callback invoked when the date changes. The current date is returned. date: current date.

DateData

Defines common date attributes and methods.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Description
year	number	Initial year of the counter.
month	number	Initial month of the counter.
day	number	Initial day of the counter.
toString()	string	Current date.

Example

Example 1

import {CounterType, CounterComponent} from '@ohos.arkui.advanced.Counter';

@Entry
@Component
struct ListCounterExample {
  build() {
    Column() {
      // List counter
      CounterComponent({ options: {
        type: CounterType.LIST,
        numberOptions: {
          label: "Price",
          min: 0,
          value: 5,
          max: 10,
        }
      }
      })
    }
  }
}

listcounter

Example 2

import {CounterType, CounterComponent} from '@ohos.arkui.advanced.Counter';

@Entry
@Component
struct CompactCounterExample {
  build() {
    Column() {
      // Compact counter
      CounterComponent({ options: {
        type: CounterType.COMPACT,
        numberOptions: {
          label: "Quantity",
          value: 10,
          min: 0,
          max: 100,
          step: 10
        }
      }
      })
    }
  }
}

compactcounter

Example 3

import {CounterType, CounterComponent} from '@ohos.arkui.advanced.Counter';

@Entry
@Component
struct NumberStyleExample {
  build() {
    Column() {
      // Inline number counter
      CounterComponent({ options: {
        type: CounterType.INLINE,
        inlineOptions: {
          value: 100,
          min: 10,
          step: 2,
          max: 1000,
          textWidth: 100,
          onChange: (value: number) => {
            console.log("onDateChange Date: " + value.toString());
          }
        } }
       })
    }
  }
}

numberstyle

Example 4

import {CounterType, CounterComponent, DateData} from '@ohos.arkui.advanced.Counter';
@Entry
@Component
struct DataStyleExample {
  build() {
    Column() {
      // Inline date counter
      CounterComponent({ options: {
        type: CounterType.INLINE_DATE,
        dateOptions: {
          year: 2016,
          onDateChange: (date: DateData) => {
            console.log("onDateChange Date: " + date.toString());
          }
        } }
       })
    }
  }
}

datestyle