Dropdown Textbox - Revision history

Cclewley at 14:53, 30 September 2021

2021-09-30T14:53:44Z

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

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

Admin at 19:19, 30 June 2021

2021-06-30T19:19:41Z

← Older revision		Revision as of 19:19, 30 June 2021
Line 63:		Line 63:
	== Design choice ==		== Design choice ==
	The blue button is chosen to fit in the general ImpVis blue while the grey dropdown box acts as a flashcard.		The blue button is chosen to fit in the general ImpVis blue while the grey dropdown box acts as a flashcard.
	[[Category:~~ImpVis Components~~]]		[[Category:Dropdowns]]

Admin: Created page with "This page is a child of the Dropdowns page. The dropdown text box component appears as a button with some text that becomes available or unavailable upon clicking. It se..."

2021-06-28T09:20:46Z

Created page with "This page is a child of the Dropdowns page. The dropdown text box component appears as a button with some text that becomes available or unavailable upon clicking. It se..."

New page

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

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

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

== Technical information ==
The iv-dropdown-text-box is a button allows users to display/hide a text box.
It is possible to disable the dropdown.

=== Props ===
Name: buttonText

Type: String

Default: "Click me"

Description: The string for the button content

Name: dropdownText

Type: String

Default: "Add text"

Description: The string for the text box content

Name: dropdownDisabled

Type: Boolean

Default: false

Description: Disable the dropdown button

=== Events ===

Name: dropdownclicked

Description: Emitted when the dropdown button is clicked

Value: click event

=== Usage ===
To insert a text into the dropdown box, bind the text to the dropdownText prop. To change the button text, bind a new text to the buttonText prop. To disable the dropdown, set the dropdownDisabled prop as 'true'.

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

== Design choice ==
The blue button is chosen to fit in the general ImpVis blue while the grey dropdown box acts as a flashcard.
[[Category:ImpVis Components]]