Difference between revisions of "Increment button"
(wrote page) |
m (moved image) |
||
| Line 2: | Line 2: | ||
[[File:Incrementbutton.png|thumb|The iv-increment-button when both increase/decease buttons are active.]] | [[File:Incrementbutton.png|thumb|The iv-increment-button when both increase/decease buttons are active.]] | ||
==Technical information== | [[File:IncrementButtonMax.png|thumb|The iv-increment-button when the current value is at its maximum.]] | ||
==Technical information == | |||
The <code>iv-increment-button</code> is a component which comes with an increase and decrease button, with a display of the current number. The increment amount and initial value can be specified through the props, alongside maximum and minimum allowed values, at which point the respective increase/decrease buttons will be disabled. If the minimum and maximum values are set as the current value, both increase/decrease buttons will be disabled. | The <code>iv-increment-button</code> is a component which comes with an increase and decrease button, with a display of the current number. The increment amount and initial value can be specified through the props, alongside maximum and minimum allowed values, at which point the respective increase/decrease buttons will be disabled. If the minimum and maximum values are set as the current value, both increase/decrease buttons will be disabled. | ||
===Props=== | ===Props=== | ||
======initialValue====== | ======initialValue====== | ||
Revision as of 10:18, 14 July 2021
The increment button component allows the user to increase/decrease a given initial value by a given amount. The increase/decrease buttons are disabled appropiately on reaching the specified maximum/minimum values.
Technical information
The iv-increment-button is a component which comes with an increase and decrease button, with a display of the current number. The increment amount and initial value can be specified through the props, alongside maximum and minimum allowed values, at which point the respective increase/decrease buttons will be disabled. If the minimum and maximum values are set as the current value, both increase/decrease buttons will be disabled.
Props
initialValue
Type: Number
Required: false
Default: 1
Description: The number at which the component starts off at.
increment
Type: Number
Required: false
Default: 1
Description: The amount by which the number is incremented/decremented by.
minimum
Type: Number
Required: false
Default: 0
Description: The minimum allowed value. When the component reaches this value, the decrease button will be disabled.
maximum
Type: Number
Required: false
Default: 10
Description: The maximum allowed value. When the component reaches this value, the increase button will be disabled.
minusDisabled
Type: Boolean
Required: false
Default: true (if initial value at minimum), false (otherwise)
Description: Manually disable the decrease button.
plusDisabled
Type: Boolean
Required: false
Default: true (if initial value at maximum), false (otherwise)
Description: Manually disable the increase button.
Events
mouseover
Trigger: mouseover
Description: Simple event carrying mouse event information, emitted when mouse cursor moves over either increase/decrease button respectively.
mouseleave
Trigger: mouseleave
Description: Simple event carrying mouse event information, emitted when mouse cursor leaves either increase/decrease button respectively.
change
Trigger: click
Description: Emits new current value when increase/decrease button is clicked, and changes display.
Design Choices
The increase/decrease buttons are styled the same as the button component to create a consistent look (see button design choices for more).