Meter - Revision history

Cclewley at 09:58, 28 September 2021

2021-09-28T09:58:27Z

← Older revision		Revision as of 09:58, 28 September 2021
Line 37:		Line 37:

	none		none
	[[Category:~~ImpVis_Components~~]]		[[Category:Loading Tools]]

Admin: Initial Page

2021-06-30T13:54:12Z

Initial Page

← Older revision		Revision as of 13:54, 30 June 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~~.		[[File:MeterFull.png\|thumb\|The iv-meter component in its fully loaded state.]]
	[[File:~~Button~~.png\|thumb\|The iv-~~button~~ component ~~when active~~.]]		[[File:MeterHalf.png\|thumb\|The iv-meter component, approximately half loaded.]]
			The meter component is a simple progress bar.
	==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-meter</code> is for use as a simple progress bar.

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

	====== ~~disabled~~ ======		====== min ======
	Type: ~~Boolean~~		Type: Number

	Required: ~~false~~		Required: true

	Default: ~~false~~		Default: 0

	Description: ~~When true the button is greyed out.~~		Description: The number at which the progress bar is completely empty.
	~~[[File:ButtonDisabled.png\|thumb\|~~The ~~iv-button component when~~ the ~~disabled prop~~ is ~~set to true~~.]]

	=== ~~Events~~ ===		====== max ======
			Type: Number

	~~====== mouseover ======~~		Required: True
	~~Trigger~~: ~~mouseover~~

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

	~~====== mouseleave ======~~		Description: The number at which the progress bar is completely full.
	~~Trigger~~: ~~mouseleave~~

	~~Description~~: ~~Simple event carrying mouse event information, emitted when mouse cursor leaves button.~~		====== value ======
			Type: Number

	~~====== click ======~~		Required: True
	~~Trigger~~: ~~click~~

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

	~~</div>~~		Description: The completeness of the bar. Bar is partially filled if value is between min and max.

	==~~Design Choices~~==		=== Events ===
	~~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.~~

			none
	[[Category:ImpVis_Components]]		[[Category:ImpVis_Components]]

Admin: 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-06-30T13:20:17Z

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:ImpVis_Components]]