Increment button

From ImpVis Wiki
Revision as of 10:17, 14 July 2021 by Shahbanno (talk | contribs) (wrote page)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

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.

The iv-increment-button when both increase/decease buttons are active.

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.

The iv-increment-button when the current value is at its maximum.

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).