Counter
#

The va-counter component is intended to be used as a simple counter.

Examples
#

Basic usage
#

By default, va-counter has v-model prop, and may also include stateful state. With manual-input the user can manually enter a value.

Default
Stateful
Manual-input
Open in GitHub

Style
#

There are tree styles for component: default (solid), outline, bordered.

Open in GitHub

Buttons
#

By default, va-counter uses internal icons. The component with prop buttons will use external buttons.

Open in GitHub

Width
#

You can set the width of the entire component with width, as well as the indentation of external buttons with margins.

Open in GitHub

Buttons style
#

You can select different button styles using properties flat (by default flat = true), rounded (by default rounded = false) and margins.

Open in GitHub

Custom icons and colors
#

You can select different icons using the increaseIcon and decreaseIcon properties, and you can also select colors using color and text-color.

Open in GitHub

State
#

Component can be disabled or readonly.

Open in GitHub

Max, min, step
#

You can define min, max and step values.

-100 to 100 with step=10
manual input
Open in GitHub

Slots
#

You can use slots for pass custom elements: content (you can access to value) instead of input element, decreaseAction (you can access to decrease function) instead of decrease icon or button and increaseAction (you can access to increase function) instead of increase icon or button.

10 copies
Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
ariaDecreaseLabel

String

"$t:decreaseCounter"

ariaIncreaseLabel

String

"$t:increaseCounter"

ariaLabel

String

"$t:counterValue"

bordered

Boolean

-

buttons

Boolean

false

color

String

"primary"

decreaseIcon

String

"remove"

disabled

Boolean

false

flat

Boolean

true

increaseIcon

String

"add"

label

String

""

longPressDelay

Number

500

manualInput

Boolean

false

margins

String | Number

"4px"

max

Number

-

messages

Array | String

[]

min

Number

-

modelValue

String | Number

0

outline

Boolean

-

preset

String

-

readonly

Boolean

false

rounded

Boolean

false

stateful

Boolean

false

step

Number

1

textColor

String

-

width

String | Number

"160px"

Events #

NameDescription

blur

On blur.

change

The change input event is fired when input is submitted (when manual-input prop enabled)

click:decreaseButton

The event is triggered when clicked decrease outside button

click:decreaseIcon

The event is triggered when clicked decrease inner icon

click:increaseButton

The event is triggered when clicked increase outside button

click:increaseIcon

The event is triggered when clicked increase inner icon

focus

On focus.

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model

Slots #

NameDescription

content

Adds an item instead the input

decreaseAction

Adds an item instead of decrease icon or button

increaseAction

Adds an item instead of increase icon or button

Css Variables #

NameDefault Value
--va-counter-button-inner-padding 6px
--va-counter-button-outer-padding 8px