Counter #
The va-counter component is intended to be used as a simple counter.
Examples #
Basic usage #
Manual input #
With manual-input the user can manually enter a value.
Style #
There are tree styles for component: outlined (default), solid and bordered. You can change component looks with presets props
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 | The aria-label of decrease button |
|
|
| ariaIncreaseLabel | The aria-label of increase button |
|
|
| ariaLabel | The aria-label of content of counter |
|
|
| background | The color name of the background color |
| - |
| buttons | Enables display of the component with external buttons |
|
|
| clearable |
|
| |
| clearableIcon | Sets the cleaning button icon. |
|
|
| clearValue | Component value that will be used as new value when component is cleared |
|
|
| color | Sets component color |
|
|
| counter |
| - | |
| decreaseIcon | Sets a decrease icon |
|
|
| dirty | Sets the dirty state of the component |
|
|
| disabled | Disable the component |
|
|
| error | Show component in error state. |
| - |
| errorCount | Number of error messages displayed. |
|
|
| errorMessages | Error messages for the component. |
| - |
| flat | Applies |
|
|
| immediateValidation | Sets the validation to be performed when the component is mounted |
|
|
| increaseIcon | Sets an increase icon |
|
|
| innerLabel |
|
| |
| inputAriaDescribedby |
| - | |
| inputAriaLabel |
|
| |
| inputAriaLabelledby |
| - | |
| label | Sets component label |
|
|
| loading | Indicates that something is loading (spinner icon). |
|
|
| longPressDelay | The number of milliseconds after which another event will be sent when you are long pressing the button |
|
|
| manualInput | Allows user to manually input value |
|
|
| margins | Sets the margin of the outside buttons |
|
|
| max | The maximum value to accept for this input |
| - |
| maxLength |
| - | |
| messages | Displays a list of hint messages (or message if using a string) |
|
|
| min | The minimum value to accept for this input |
| - |
| modelValue | The value of the |
|
|
| name | Applies |
| - |
| placeholder |
|
| |
| preset | Named preset combination of component props. |
| - |
| readonly | Puts component in readonly state |
|
|
| requiredMark | Adds required mark to the label |
|
|
| rounded | Adds rounded corners to outside buttons |
|
|
| rules | Validation rules . |
|
|
| stateful | Add possibility to work with component without setting |
|
|
| step | Step of changing input field values |
|
|
| success | Show component in success state. |
|
|
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:dirty | Fires when the dirty state changes |
update:error | Fires when the error state changes |
update:errorMessages | Fires when the error messages change |
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 |