Basic toggle - Revision history

Cclewley at 15:04, 30 September 2021

2021-09-30T15:04:42Z

← Older revision		Revision as of 15:04, 30 September 2021
Line 1:		Line 1:
	~~This page is a child of the [[Toggles]] page.~~		The basic toggle component appears as a button that slides upon clicking and serves to allow user to pick between two choices. This component can be called using the <code>iv-toggle-basic</code> tag.

	The basic toggle component appears as a button that slides upon clicking and serves to allow user to pick between two choices. This component can be called using the <code>iv-toggle-basic</code> tag.

	<div class="res-img">		<div class="res-img">

Shahbanno: /* Technical information */

2021-07-19T10:09:57Z

Technical information

← Older revision		Revision as of 10:09, 19 July 2021
Line 26:		Line 26:
	Default: false		Default: false

	Description: When the toggle is moved to the left, all [[Slider\|sliders]], basic toggles, [[advance toggle]]<nowiki/>s, ~~and~~ increment buttons are reset to their intial values.		Description: When the toggle is moved to the left, all [[Slider\|sliders]], [[Basic toggle\|basic toggles]], [[advance toggle]]<nowiki/>s, [[Increment button\|increment buttons]], and [[Dropdown List\|dropdown lists]] are reset to their intial values.
	=== Events ===		=== Events ===
	Name: input		Name: input

Shahbanno: added new resetCapability prop

2021-07-14T09:25:24Z

added new resetCapability prop

← Older revision		Revision as of 09:25, 14 July 2021
Line 18:		Line 18:

	Description: Setting the initial toggle boolean		Description: Setting the initial toggle boolean


			Name: resetCapability

			Type: Boolean

			Default: false

			Description: When the toggle is moved to the left, all [[Slider\|sliders]], basic toggles, [[advance toggle]]<nowiki/>s, and increment buttons are reset to their intial values.
	=== Events ===		=== Events ===
	Name: input		Name: input

Admin at 08:57, 13 July 2021

2021-07-13T08:57:34Z

← Older revision		Revision as of 08:57, 13 July 2021
Line 19:		Line 19:
	Description: Setting the initial toggle boolean		Description: Setting the initial toggle boolean
	=== Events ===		=== Events ===
	Name: ~~toggleswitched~~		Name: input

	Description: Emitted when the toggle is clicked		Description: Emitted when the toggle is clicked

Shahbanno: corrected which props it uses

2021-07-07T13:58:00Z

corrected which props it uses

← Older revision		Revision as of 13:58, 7 July 2021
Line 11:		Line 11:

	=== Props ===		=== Props ===
	Name: ~~initialMode~~		Name: value

	Type: Boolean		Type: Boolean

	Default: ~~true~~		Default: false

	Description: Setting the initial toggle boolean		Description: Setting the initial toggle boolean


	~~Name: toggleDisabled~~

	~~Type: Boolean~~

	~~Default: false~~

	~~Description: Disable the input~~

	=== Events ===		=== Events ===
	Name: toggleswitched		Name: toggleswitched

Admin at 12:58, 30 June 2021

2021-06-30T12:58:31Z

← Older revision		Revision as of 12:58, 30 June 2021
Line 50:		Line 50:
	== Design choice ==		== Design choice ==
	The blue button is chosen to fit in the general ImpVis blue while the grey button (toggle disabled mode) gives a sense of inactive.		The blue button is chosen to fit in the general ImpVis blue while the grey button (toggle disabled mode) gives a sense of inactive.

			[[Category:Toggles]]

Admin: Created page with "This page is a child of the Toggles page. The basic toggle component appears as a button that slides upon clicking and serves to allow user to pick between two choices...."

2021-06-28T09:34:15Z

Created page with "This page is a child of the Toggles page. The basic toggle component appears as a button that slides upon clicking and serves to allow user to pick between two choices...."

New page

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

The basic toggle component appears as a button that slides upon clicking and serves to allow user to pick between two choices. This component can be called using the <code>iv-toggle-basic</code> tag.

<div class="res-img">
[[File:ToggleBasic.png]]
</div>

== Technical information ==
It is possible to disable the toggle.

=== Props ===
Name: initialMode

Type: Boolean

Default: true

Description: Setting the initial toggle boolean

Name: toggleDisabled

Type: Boolean

Default: false

Description: Disable the input

=== Events ===
Name: toggleswitched

Description: Emitted when the toggle is clicked

Value: toggleMode

=== Usage ===
You may change the default mode by setting the initialMode prop to "false". To disable the toggle, set the toggleDisabled prop to "true".

<div class="res-img">
[[File:ToggleBasicTrueMode.png]]
</div>
<div class="res-img">
[[File:ToggleBasicFalseMode.png]]
</div>
<div class="res-img">
[[File:ToggleBasicDisabled.png]]
</div>

== Design choice ==
The blue button is chosen to fit in the general ImpVis blue while the grey button (toggle disabled mode) gives a sense of inactive.