Difference between revisions of "Increment button"

From ImpVis Wiki
Jump to navigation Jump to search
(wrote page)
 
 
(One intermediate revision by the same user not shown)
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.
[[File:IncrementButtonMax.png|thumb|The iv-increment-button when the current value is at its maximum.]]
 
===Props===
===Props===
======initialValue======
======initialValue======
Line 70: Line 72:
==Design Choices==
==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).
The increase/decrease buttons are styled the same as the [[button]] component to create a consistent look (see [[button]] design choices for more).
[[Category:Buttons]]

Latest revision as of 10:23, 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.

The iv-increment-button when both increase/decease buttons are active.
The iv-increment-button when the current value is at its maximum.

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