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.
Style #
There are tree styles for component: default (solid), outline, bordered.
Buttons #
By default, va-counter
uses internal icons. The component with prop buttons
will use external buttons.
Width #
You can set the width of the entire component with width
, as well as the indentation of external buttons with margins
.
Buttons style #
You can select different button styles using properties flat
(by default flat = true
), rounded
(by default rounded = false
) and margins
.
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
.
State #
Component can be disabled
or readonly
.
Max, min, step #
You can define min
, max
and step
values.
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.
API #
Props #
Name | Description | Types | Default |
---|---|---|---|
ariaDecreaseLabel |
|
| |
ariaIncreaseLabel |
|
| |
ariaLabel |
|
| |
bordered |
| - | |
buttons |
|
| |
color |
|
| |
decreaseIcon |
|
| |
disabled |
|
| |
flat |
|
| |
increaseIcon |
|
| |
label |
|
| |
longPressDelay |
|
| |
manualInput |
|
| |
margins |
|
| |
max |
| - | |
messages |
|
| |
min |
| - | |
modelValue |
|
| |
outline |
| - | |
preset |
| - | |
readonly |
|
| |
rounded |
|
| |
stateful |
|
| |
step |
|
| |
textColor |
| - | |
width |
|
|
Events #
Name | Description |
---|---|
blur | On blur. |
change | The change input event is fired when input is submitted (when |
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 |
Slots #
Name | Description |
---|---|
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 #
Name | Default Value |
---|---|
--va-counter-button-inner-padding | 6px |
--va-counter-button-outer-padding | 8px |