Advance toggle - Revision history

Cclewley at 15:04, 30 September 2021

2021-09-30T15:04:59Z

← Older revision		Revision as of 15:04, 30 September 2021
Line 1:		Line 1:
	~~This page is a child of the [[Toggles]] page.~~

	The advance toggle component appears as a tray of options. It serves as a way to display options and highlighting the active one. This component can be called using the <code>iv-toggle-advance</code> tag.		The advance toggle component appears as a tray of options. It serves as a way to display options and highlighting the active one. This component can be called using the <code>iv-toggle-advance</code> tag.

Shahbanno: added new width prop

2021-07-14T09:22:00Z

added new width prop

← Older revision		Revision as of 09:22, 14 July 2021
Line 39:		Line 39:

	Description: Disable the input		Description: Disable the input


			Name: width

			Type: String

			Default: '95px'

			Description: Change the width of the toggle tabs

	=== Events ===		=== Events ===

Admin at 12:59, 30 June 2021

2021-06-30T12:59:21Z

← Older revision		Revision as of 12:59, 30 June 2021
Line 62:		Line 62:
	== Design choice ==		== Design choice ==
	The blue button is chosen to fit in the general ImpVis blue. The lighter blue on the option upon cursor hovering gives the impression of active to tell the user the cursor is hovering over this option.		The blue button is chosen to fit in the general ImpVis blue. The lighter blue on the option upon cursor hovering gives the impression of active to tell the user the cursor is hovering over this option.

			[[Category:Toggles]]

Admin: Created page with "This page is a child of the Toggles page. The advance toggle component appears as a tray of options. It serves as a way to display options and highlighting the active on..."

2021-06-28T09:37:12Z

Created page with "This page is a child of the Toggles page. The advance toggle component appears as a tray of options. It serves as a way to display options and highlighting the active on..."

New page

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

The advance toggle component appears as a tray of options. It serves as a way to display options and highlighting the active one. This component can be called using the <code>iv-toggle-advance</code> tag.

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

== Technical information ==
The <code>iv-toggle-advance</code> is a button that allows users to switch between multiple modes.
It is possible to disable the toggle. This component builds on [[Advance toggle button]].

=== Props ===
Name: modes

Type: Array

Required: true

Default: ["Option 1", "Option 2", "Option 3"]

Description: The array container for the toggle modes text

Name: initialModeIndex

Type: Number

Default: 0

Description: Setting the initial toggle mode

Name: toggleDisabled

Type: Boolean

Default: false

Description: Disable the input

=== Events ===
Name: toggleswitched

Description: Emitted when the toggle is clicked

Value: toggleMode

=== Usage ===
To set the text for the options, create a prop with an array of the strings and bind the prop to modes. To disable the toggle, set the toggleDisabled prop as 'true'.

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

== Design choice ==
The blue button is chosen to fit in the general ImpVis blue. The lighter blue on the option upon cursor hovering gives the impression of active to tell the user the cursor is hovering over this option.