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>
2.3 KiB
Split Icon Button
UI guidelines on using split icon buttons.
Implementation: SplitButtonAction
A split icon button appears on a horizontal toolbar and consists of two parts: the main icon and a triangle icon for the action list.
{width=278}
When to use
The split icon button helps reduce the number of icons on the toolbar and minimize visual noise.
Use the split icon button for a group of similar actions if there are already many icons on the toolbar and:
-
The user invokes one action more often than others,
-
Or if the user invokes one action several times, then switches to another action and invokes it several times but does not switch between actions too often.
{width=325}
Profiler actions are grouped into a split button
If the user invokes actions with the same frequency or often switches from one action to another, use separate icons for each action.
To decide whether to add the whole group of actions on the toolbar, follow the rules for the toolbar.
Use the split icon button on horizontal toolbars only, as it’s too wide for vertical toolbars.
How to use
Make sure that all actions in the popup menu have icons. When an action is launched, its icon will be used as the main icon.
{width=325}
The user clicks Profile Allocations, the action starts, and its icon is shown as the main icon.
Built-in behavior
On hover, the main icon and the triangle icon are highlighted separately, and the line between two parts is added. The tooltip for the main icon action is shown on hovering over it.
{width=192}
The main icon invokes its action on click. The triangle icon opens the action menu on click:
{width=325}
If some actions are unavailable, the corresponding menu items are disabled. The action menu should always open, even if all the items in it are disabled.
{width=325}