Difference between revisions of "Meter"

From ImpVis Wiki
Jump to navigation Jump to search
(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...")
 
(Initial Page)
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]]

Revision as of 13:54, 30 June 2021

The iv-meter component in its fully loaded state.
The iv-meter component, approximately half loaded.

The meter component is a simple progress bar.

Technical information

The iv-meter is for use as a simple progress bar.

Props

min

Type: Number

Required: true

Default: 0

Description: The number at which the progress bar is completely empty.

max

Type: Number

Required: True

Default: 100

Description: The number at which the progress bar is completely full.

value

Type: Number

Required: True

Default: 0

Description: The completeness of the bar. Bar is partially filled if value is between min and max.

Events

none

Retrieved from ‘https://wiki.impvis.co.uk/index.php?title=Meter&oldid=144’