Basic toggle

From ImpVis Wiki
Revision as of 09:34, 28 June 2021 by Admin (talk | contribs) (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....")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

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 iv-toggle-basic tag.

ToggleBasic.png

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".

ToggleBasicTrueMode.png

ToggleBasicFalseMode.png

ToggleBasicDisabled.png

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.