Page Indicator - Revision history

Admin at 13:00, 30 June 2021

2021-06-30T13:00:20Z

← Older revision		Revision as of 13:00, 30 June 2021
Line 16:		Line 16:
	The colour is designed to fit with the general ImpVis blue. There is no highlighting on hover; this could be added in future. The currently active page is highlighted in white to indicate that this page is currently selected.		The colour is designed to fit with the general ImpVis blue. There is no highlighting on hover; this could be added in future. The currently active page is highlighted in white to indicate that this page is currently selected.

	~~[[Category:ImpVis_Components]]~~ [[Category:Layouts]]		[[Category:Layouts]]

Admin at 10:16, 30 June 2021

2021-06-30T10:16:12Z

← Older revision		Revision as of 10:16, 30 June 2021
Line 1:		Line 1:
	[[File:PageIndicator.png\|thumb\|The iv-page-indicator component with the first page active and five pages in the collection.]]		[[File:PageIndicator.png\|thumb\|The iv-page-indicator component with the first page active and five pages in the collection.]]
	The page indicator component is designed to display the page number in the top left of the page for collections of visualisations.		The page indicator component is designed to display the page number in the top left of the page for collections of visualisations. It should create one button for each page in a collection, and the currently active page should be highlighted in white.
	==Technical information==		==Technical information==
	The <code>iv-page-indicator</code> is not designed for general use. Instead it should automatically appear when a collection is created on the website.		The <code>iv-page-indicator</code> is not designed for general use. Instead it should automatically appear when a collection is created on the website.
Line 14:		Line 14:

	==Design Choices==		==Design Choices==
	The colour is designed to fit with the general ImpVis blue. There is no highlighting on hover; this could be added in future.		The colour is designed to fit with the general ImpVis blue. There is no highlighting on hover; this could be added in future. The currently active page is highlighted in white to indicate that this page is currently selected.

	[[Category:ImpVis_Components]] [[Category:Layouts]]		[[Category:ImpVis_Components]] [[Category:Layouts]]

Admin: Initial Page

2021-06-30T10:13:23Z

Initial Page

← Older revision		Revision as of 10:13, 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:PageIndicator.png\|thumb\|The iv-page-indicator component with the first page active and five pages in the collection.]]
	[[File:~~Button~~.png\|thumb\|The iv-~~button~~ component ~~when~~ active.]]		The page indicator component is designed to display the page number in the top left of the page for collections of visualisations.

	==Technical information==		==Technical information==
	The <code>iv-~~button~~</code> if 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-page-indicator</code> is not designed for general use. Instead it should automatically appear when a collection is created on the website.

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

	~~====== disabled ======~~		none
	~~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 ===		=== Events ===

	~~====== mouseover ======~~		none<div class="res-img">
	~~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>		</div>

	==Design Choices==		==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~~.		The colour is designed to fit with the general ImpVis blue. There is no highlighting on hover; this could be added in future.

	[[Category:ImpVis_Components]] [[Category:Layouts]]		[[Category:ImpVis_Components]] [[Category:Layouts]]

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-30T10:06:27Z

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> if 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]] [[Category:Layouts]]