d8e83b57ea
* Add UI Guidelines to SDK docs * Add UI Guidelines to SDK docs * Fixing build errors * optimize PNGs * add UI guidelines landing page placeholder * IJ SDK Docs <-> UI guidelines crosslinks updated * split_button.md: remove reference to removed setting * use <ui-path> * use MD instead of <note> * use %gh-ic% links * drop_down.md: fix <control> * code samples: fix most obvious issues * remove obsolete `_defaults.md` * ijs.tree: UI cleanup * Delete "under construction" pages * Fix headers * Add link-summary * Remove invalid links * Delete unused files * Remove ''@2x' from image file names * Use Markdown syntax for some images and tables * Rename non-unique files to unique * Remove alpha in images where content is unreadable * align quotation marks * Controls: cleanup/fixes, add code links, edit * tooltip.md: fix HTML * misc fixes * typography.md: fix table contents * typography.md: fix table header * UI guidelines landing page + TOC fixes * remove unused icons_list.md * Normalize image paths * validation_errors.md: Fix broken tab * "correct"/"incorrect" labels styling * Resize images to 50% * button.topic: fixes * grammar, spelling, minor edits * remove ' ' * fix 99px * cleanup * UI_kit.md: minor * Fix "MRK058: Large image in paragraph rendered as a block element by default." * button.topic: Add img[alt] * mnemonics.md: Update "Contact Us" link to the IJSDK YouTrack * split_button.md: Use ui-path * UI landing: add feedback snippet * Improve code snippets formatting and naming * Fix code samples * Fix code samples * Add Kotlin variants for code samples * Add icons_list.md * crosslinks * Change external link to https://intellij-icons.jetbrains.design/ * icons list -> https://intellij-icons.jetbrains.design * Hide info about reducing split button to simple action button (now it is available through the registry only) * reformat * icons_style.md: Images in new line --------- Co-authored-by: marianna.kononenko <marianna.kononenko@jetbrains.com> Co-authored-by: Yann Cébron <yann.cebron@jetbrains.com>
3.6 KiB
Toggle Button
UI guidelines on using toggle buttons.
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:
-
If this is a system or editor or another kind of settings, register the corresponding
BooleanOptionDescriptionfor the option. The options can be bound (but not limited) to:-
A
SearchTopHitProviderinstance which is registered in plugin.xml with the<search.topHitProvider implementation="fq.class.name"/>tag. For example, see theSystemOptionsTopHitProviderclass that represents matching of Reopen last project on startup checkbox toBooleanOptionDescription. -
EditorOptionDescriptionbound toEditorSettingsExternalizable, which under the hood works with the editor.xml.
-
-
Implement your own action that's inherited from
ToggleActionand 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.