Pane - Revision history

Hamzah: /* Events */

2021-07-16T14:47:59Z

Events

← Older revision		Revision as of 14:47, 16 July 2021
Line 42:		Line 42:

	===Events===		===Events===
	mouseup and mousemove		'''mouseup''' and '''mousemove'''

	~~description~~: ~~allow~~ draggable resize using mouse		''Description: Allow draggable resize using mouse.''

	touchmove and touchend		'''touchmove''' and '''touchend'''

	~~description~~: ~~allow~~ draggable resize using touchscreen		''Description: Allow draggable resize using touchscreen.''

			'''paneReveal''', '''paneHide''', '''paneToggle'''

			''Description: Emits respective events when pane is revealed, hidden or just toggled. Can listen to any event and get the new width of the pane (except for paneHide as you know the width is 0). Emits events consistent to main-stage shifting, when hidden it outputs 0 immediately, when revealed it outputs the end width after css animation has completed.'' ''Width emitted as Number.''

			'''paneResize'''

			''Description: Emits this event as user resizes the pane. Provides the width as the user drags the pane. Width emitted as Number.''

	==Design Choice==		==Design Choice==

FreyaHan at 09:10, 1 July 2021

2021-07-01T09:10:26Z

← Older revision		Revision as of 09:10, 1 July 2021
Line 1:		Line 1:
	The pane component creates a pane on either the right or the left hand side of the page.<div class="res-img">		The <code>iv-pane</code> component creates a pane on either the right or the left hand side of the page.<div class="res-img">
	[[File:Pane.png\|839x839px]]		[[File:Pane.png\|839x839px]]
	</div>		</div>
			==Technical Information==
	===Props===		===Props===
	Name: width		Name: width
Line 39:		Line 40:

	Description: If true, allows users to resize the pane		Description: If true, allows users to resize the pane

			===Events===
			mouseup and mousemove

			description: allow draggable resize using mouse

			touchmove and touchend

			description: allow draggable resize using touchscreen

			==Design Choice==
			The pane was made to be pure white and the toggle button was made to be imperial blue to match the theme.


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

FreyaHan at 14:13, 30 June 2021

2021-06-30T14:13:14Z

← Older revision		Revision as of 14:13, 30 June 2021
Line 10:		Line 10:

	Description: Used to set the width of the pane		Description: Used to set the width of the pane


	Name: format		Name: format
Line 20:		Line 21:

	Description: Used to set the pane to different mode (i.e. it lays on top of the main stage or it pushes the main stage to the side)		Description: Used to set the pane to different mode (i.e. it lays on top of the main stage or it pushes the main stage to the side)


	Name: glass		Name: glass
Line 28:		Line 30:

	Description: If true, turns the opacity of the pane to 0		Description: If true, turns the opacity of the pane to 0


	Name: allowResize		Name: allowResize

FreyaHan at 14:10, 30 June 2021

2021-06-30T14:10:42Z

← Older revision		Revision as of 14:10, 30 June 2021
Line 1:		Line 1:
	~~This page is a child of the [[Layout]] page.~~		The pane component creates a pane on either the right or the left hand side of the page.<div class="res-img">
			[[File:Pane.png\|839x839px]]
	The pane component creates a pane on either the right or the left hand side of the page.
	<div class="res-img">
	[[File:~~Toggle hotspot~~.png\|839x839px]]
	</div>		</div>
	===Props===		===Props===

FreyaHan at 14:09, 30 June 2021

2021-06-30T14:09:50Z

← Older revision		Revision as of 14:09, 30 June 2021
Line 3:		Line 3:
	The pane component creates a pane on either the right or the left hand side of the page.		The pane component creates a pane on either the right or the left hand side of the page.
	<div class="res-img">		<div class="res-img">
	[[File:~~Pane~~.png\|~~970x970px~~]]		[[File:Toggle hotspot.png\|839x839px]]
	</div>		</div>
	===Props===		===Props===

FreyaHan at 10:50, 30 June 2021

2021-06-30T10:50:19Z

← Older revision		Revision as of 10:50, 30 June 2021
Line 39:		Line 39:

	Description: If true, allows users to resize the pane		Description: If true, allows users to resize the pane
			[[Category:Layouts]]

FreyaHan at 10:49, 30 June 2021

2021-06-30T10:49:34Z

← Older revision		Revision as of 10:49, 30 June 2021
Line 5:		Line 5:
	[[File:Pane.png\|970x970px]]		[[File:Pane.png\|970x970px]]
	</div>		</div>
			===Props===
			Name: width

			Type: Number

			Default: 400

			Description: Used to set the width of the pane

			Name: format

			Type: String

			Default: 'push'

			Validator: ['overlay','push']

			Description: Used to set the pane to different mode (i.e. it lays on top of the main stage or it pushes the main stage to the side)

			Name: glass

			Type: Boolean

			Default: false

			Description: If true, turns the opacity of the pane to 0

			Name: allowResize

			Type: Boolean

			Default: false

			Description: If true, allows users to resize the pane

FreyaHan: Created page with "This page is a child of the Layout page. The pane component creates a pane on either the right or the left hand side of the page.
File:Pane.png|9..."

2021-06-30T09:37:56Z

Created page with "This page is a child of the Layout page. The pane component creates a pane on either the right or the left hand side of the page. <div class="res-img"> File:Pane.png|9..."

New page

This page is a child of the [[Layout]] page.

The pane component creates a pane on either the right or the left hand side of the page.
<div class="res-img">
[[File:Pane.png|970x970px]]
</div>