3.6 KiB

Toggle Button

UI guidelines on using toggle buttons.

Implementation: see

The toggle button is used to switch between On and Off states.

{width=53}

When to use

Use the toggle button to switch the state of an item in search results:

{width=676}

Do not use the toggle button for items in dialogs and menus. Instead, use a checkbox in dialogs and a checkmark in menus:

{width=400}

How to use

Label

The toggle button in search results should duplicate the option from the settings or the menu. Label and capitalization should be the same as on the option label:

{width=228 style=block} Setting in the preferences

{width=676 style=block} The same setting in search results

Do not make a setting available only from search results.

If the setting is in a tree or menu, use the toggle button label to specify where the setting is located:

{width=387 style=block} Setting in a tree

{width=676 style=block} The same setting in search results; separate tree levels with a colon

{width=497 style=block} Setting in the main menu

{width=676 style=block} The same setting in search results; separate the first menu level with a vertical bar, and separate others with a colon

Refer to checkbox for writing checkbox labels and menu labels.

Do not add the word "On" or "Off" to the item name, since the state description is already in the toggle button.

Control

A toggle button is implemented with the OnOffButton class. But generally, you shouldn't use the class directly. The IDE automatically places the buttons in the search feed if you follow one of the patterns described below:

  1. If this is a system or editor or another kind of settings, register the corresponding BooleanOptionDescription for the option. The options can be bound (but not limited) to:

    • A SearchTopHitProvider instance which is registered in plugin.xml with the <search.topHitProvider implementation="fq.class.name"/> tag. For example, see the SystemOptionsTopHitProvider class that represents matching of Reopen last project on startup checkbox to BooleanOptionDescription.

    • EditorOptionDescription bound to EditorSettingsExternalizable, which under the hood works with the editor.xml.

  2. Implement your own action that's inherited from ToggleAction and registered in plugin.xml.

The toggle button changes state when it is clicked with the mouse or when Enter is pressed on the item line.