Reset button - Revision history

Shahbanno: updated with dropdown list feature

2021-07-19T10:09:00Z

updated with dropdown list feature

← Older revision		Revision as of 10:09, 19 July 2021
Line 1:		Line 1:
	The reset button component resets any [[slider]], [[basic toggle]], [[advance toggle]], ~~and~~ increment button components on the page to their initial values, and is an extension of the ImpVis [[button]] component.		The reset button component resets any [[slider]], [[basic toggle]], [[advance toggle]], [[increment button]], and [[Dropdown List\|dropdown list]] components on the page to their initial values, and is an extension of the ImpVis [[button]] component.

	Also see [[basic toggle]]'s resetCapability prop, for details on how to use the reset functionality in the form of a toggle instead.		Also see [[basic toggle]]'s resetCapability prop, for details on how to use the reset functionality in the form of a toggle instead.
Line 5:		Line 5:

	==Technical information==		==Technical information==
	The <code>iv-reset-button</code> is for use as a button which resets any [[slider]], [[basic toggle]], [[advance toggle]], and ~~increment buttons~~ on the page. It can also be used to execute any other function like a normal button would. To add text, simply write it in the iv-button slot (between the starting and closing HTML tags).		The <code>iv-reset-button</code> is for use as a button which resets any [[slider]], [[basic toggle]], [[advance toggle]], [[increment button]], and [[Dropdown List\|dropdown list]] components on the page. It can also be used to execute any other function like a normal button would. To add text, simply write it in the iv-button slot (between the starting and closing HTML tags).

	===Props===		===Props===

Shahbanno: referred to resetCapability prop on basic toggle

2021-07-14T09:26:55Z

referred to resetCapability prop on basic toggle

← Older revision		Revision as of 09:26, 14 July 2021
Line 1:		Line 1:
	The reset button component resets any [[slider]], [[basic toggle]], [[advance toggle]], and increment button components on the page to their initial values, and is an extension of the ImpVis [[button]] component.		The reset button component resets any [[slider]], [[basic toggle]], [[advance toggle]], and increment button components on the page to their initial values, and is an extension of the ImpVis [[button]] component.

			Also see [[basic toggle]]'s resetCapability prop, for details on how to use the reset functionality in the form of a toggle instead.
	[[File:Button.png\|thumb\|The iv-reset-button component when active.]]		[[File:Button.png\|thumb\|The iv-reset-button component when active.]]

Shahbanno: added description of other componenets which reset button is now compatible with

2021-07-13T09:14:12Z

added description of other componenets which reset button is now compatible with

← Older revision		Revision as of 09:14, 13 July 2021
Line 1:		Line 1:
	The reset button component resets any slider and ~~toggle~~ components on the page to their initial values, and is an extension of the ImpVis [[button]] component.		The reset button component resets any [[slider]], [[basic toggle]], [[advance toggle]], and increment button components on the page to their initial values, and is an extension of the ImpVis [[button]] component.
	[[File:Button.png\|thumb\|The iv-reset-button component when active.]]		[[File:Button.png\|thumb\|The iv-reset-button component when active.]]

	==Technical information==		==Technical information==
	The <code>iv-reset-button</code> is for use as a button which resets any ~~sliders~~ and ~~toggles~~ on the page. It can also be used to execute any other function like a normal button would. To add text, simply write it in the iv-button slot (between the starting and closing HTML tags).		The <code>iv-reset-button</code> is for use as a button which resets any [[slider]], [[basic toggle]], [[advance toggle]], and increment buttons on the page. It can also be used to execute any other function like a normal button would. To add text, simply write it in the iv-button slot (between the starting and closing HTML tags).

	===Props===		===Props===

Shahbanno at 14:22, 1 July 2021

2021-07-01T14:22:26Z

← Older revision		Revision as of 14:22, 1 July 2021
Line 1:		Line 1:
	The reset button component ~~is an extension of the ImpVis [[button]] component, which~~ resets any slider and toggle components on the page to their initial values.		The reset button component resets any slider and toggle components on the page to their initial values, and is an extension of the ImpVis [[button]] component.
	[[File:Button.png\|thumb\|The iv-button component when active.]]		[[File:Button.png\|thumb\|The iv-reset-button component when active.]]

	==Technical information==		==Technical information==

Shahbanno at 14:21, 1 July 2021

2021-07-01T14:21:20Z

← Older revision		Revision as of 14:21, 1 July 2021
Line 1:		Line 1:
	The reset button component is an extension of the ImpVis [[button]] component, which resets any ~~sliders~~ and ~~toggles~~ components on the page to their initial values.		The reset button component is an extension of the ImpVis [[button]] component, which resets any slider and toggle components on the page to their initial values.
	[[File:Button.png\|thumb\|The iv-button component when active.]]		[[File:Button.png\|thumb\|The iv-button component when active.]]

	==Technical information==		==Technical information==
	The <code>iv-button</code> is for use as a ~~simple~~ button~~, e~~.~~g. "play/pause"/"reset" etc~~. To add text, simply write it in the iv-button slot (between the starting and closing HTML tags).		The <code>iv-reset-button</code> is for use as a button which resets any sliders and toggles on the page. It can also be used to execute any other function like a normal button would. To add text, simply write it in the iv-button slot (between the starting and closing HTML tags).

	===Props===		===Props===
Line 32:		Line 32:
	Trigger: click		Trigger: click

	Description: ~~Simple event~~ carrying mouse event information, emitted when mouse button pressed over button.<div class="res-img">		Description: Event resetting sliders and toggles on the page to their default values, as well as carrying mouse event information, emitted when mouse button pressed over button.<div class="res-img">

	</div>		</div>

Shahbanno at 14:05, 1 July 2021

2021-07-01T14:05:39Z

← Older revision		Revision as of 14:05, 1 July 2021
Line 1:		Line 1:
	The reset button component is an extension of the ImpVis [[button ~~component~~]], which resets any sliders and toggles components on the page to their initial values.		The reset button component is an extension of the ImpVis [[button]] component, which resets any sliders and toggles components on the page to their initial values.
	[[File:Button.png\|thumb\|The iv-button component when active.]]		[[File:Button.png\|thumb\|The iv-button component when active.]]

Shahbanno at 14:05, 1 July 2021

2021-07-01T14:05:02Z

← Older revision		Revision as of 14:05, 1 July 2021
Line 1:		Line 1:
	The button component is ~~just a simple~~ button which ~~is designed to fit~~ the ~~ImpVis Theme and emit events which are easy~~ to ~~use~~.		The reset button component is an extension of the ImpVis [[button component]], which resets any sliders and toggles components on the page to their initial values.
	[[File:Button.png\|thumb\|The iv-button component when active.]]		[[File:Button.png\|thumb\|The iv-button component when active.]]

Shahbanno: Created page with "The button component is just a simple button which is designed to fit the ImpVis Theme and emit events which are easy to use. File:Button.png|thumb|The iv-button component w..."

2021-07-01T14:03:15Z

Created page with "The button component is just a simple button which is designed to fit the ImpVis Theme and emit events which are easy to use. File:Button.png|thumb|The iv-button component w..."

New page

The button component is just a simple button which is designed to fit the ImpVis Theme and emit events which are easy to use.
[[File:Button.png|thumb|The iv-button component when active.]]

==Technical information==
The <code>iv-button</code> is for use as a simple button, e.g. "play/pause"/"reset" etc. To add text, simply write it in the iv-button slot (between the starting and closing HTML tags).

===Props===

====== disabled ======
Type: Boolean

Required: false

Default: false

Description: When true the button is greyed out.
[[File:ButtonDisabled.png|thumb|The iv-button component when the disabled prop is set to true.]]

=== Events ===

====== mouseover ======
Trigger: mouseover

Description: Simple event carrying mouse event information, emitted when mouse cursor moves over button.

====== mouseleave ======
Trigger: mouseleave

Description: Simple event carrying mouse event information, emitted when mouse cursor leaves button.

====== click ======
Trigger: click

Description: Simple event carrying mouse event information, emitted when mouse button pressed over button.<div class="res-img">

</div>

==Design Choices==
The green button is chosen to stand out against the general ImpVis blue. The lighter green upon cursor hovering gives the impression of active to tell the user the cursor is hovering over this option.

[[Category:Buttons]]