Increment button - Revision history

Shahbanno at 10:23, 14 July 2021

2021-07-14T10:23:20Z

← Older revision		Revision as of 10:23, 14 July 2021
Line 72:		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]]

Shahbanno: moved image

2021-07-14T10:18:32Z

moved image

← Older revision		Revision as of 10:18, 14 July 2021
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======

Shahbanno: wrote page

2021-07-14T10:17:01Z

wrote page

New page

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.
[[File:Incrementbutton.png|thumb|The iv-increment-button when both increase/decease buttons are active.]]

==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.
[[File:IncrementButtonMax.png|thumb|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.<div class="res-img"></div>
==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).