Dropdown List - Revision history

Cclewley at 14:52, 30 September 2021

2021-09-30T14:52:37Z

← Older revision		Revision as of 14:52, 30 September 2021
Line 1:		Line 1:
	~~This page is a child of the [[Dropdowns]] page.~~

	The dropdown list component appears as a button with a tray of options that becomes available or unavailable upon clicking. It serves as a way to hide multiple options for saving space. This component can be called using the <code>iv-dropdown-list</code> tag.		The dropdown list component appears as a button with a tray of options that becomes available or unavailable upon clicking. It serves as a way to hide multiple options for saving space. This component can be called using the <code>iv-dropdown-list</code> tag.

Shahbanno: corrected event names

2021-07-19T09:36:22Z

corrected event names

← Older revision		Revision as of 09:36, 19 July 2021
Line 42:		Line 42:

	=== Events ===		=== Events ===
	Name: ~~dropdownlistbuttonclicked~~		Name: dropdownbuttonclicked

	Description: Emitted when the dropdown button is clicked		Description: Emitted when the dropdown button is clicked
Line 49:		Line 49:


	Name: ~~dropdownlistelementclicked~~
			Name: dropdownelementclicked

	Description: Emitted when the list element is clicked		Description: Emitted when the list element is clicked

Admin at 19:12, 30 June 2021

2021-06-30T19:12:38Z

← Older revision		Revision as of 19:12, 30 June 2021
Line 72:		Line 72:
	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:~~ImpVis_Components~~]]		[[Category:Dropdowns]]

Admin: Created page with "This page is a child of the Dropdowns page. The dropdown list component appears as a button with a tray of options that becomes available or unavailable upon clicking. I..."

2021-06-28T09:15:27Z

Created page with "This page is a child of the Dropdowns page. The dropdown list component appears as a button with a tray of options that becomes available or unavailable upon clicking. I..."

New page

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

The dropdown list component appears as a button with a tray of options that becomes available or unavailable upon clicking. It serves as a way to hide multiple options for saving space. This component can be called using the <code>iv-dropdown-list</code> tag.

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

== Technical information ==
The <code>iv-dropdown-list</code> is a button allows users to select a mode from a display/hide list of modes.
It is possible to disable the dropdown. This component builds on [[Dropdown List Element]].

=== Props ===
Name: dropdownItems

Type: Array

Required: true

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

Description: The array container for the dropdown list text

Name: initialDropdownIndex

Type: Number

Default: 0

Description: Setting the initial dropdown mode

Name: dropdownDisabled

Type: Boolean

Default: false

Description: Disable the dropdown button

=== Events ===
Name: dropdownlistbuttonclicked

Description: Emitted when the dropdown button is clicked

Value: dropdownIndex

Name: dropdownlistelementclicked

Description: Emitted when the list element is clicked

Value: click event

=== 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 dropdown, set the dropdownDisabled prop as 'true'.

<div class="res-img">
[[File:DropdownListMode1.png]]
</div>
<div class="res-img">
[[File:DropdownListDropdownMode.png]]
</div>
<div class="res-img">
[[File:DropdownListSelectMode.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.

[[Category:ImpVis_Components]]