mirror of
https://github.com/JetBrains/intellij-sdk-code-samples.git
synced 2025-07-29 01:37:51 +08:00
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>
60 lines
2.3 KiB
Markdown
60 lines
2.3 KiB
Markdown
<!-- Copyright 2000-2024 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -->
|
||
|
||
# Split Icon Button
|
||
|
||
<link-summary>UI guidelines on using split icon buttons.</link-summary>
|
||
|
||
<tldr>
|
||
|
||
**Implementation:** [`SplitButtonAction`](%gh-ic%/platform/platform-impl/src/com/intellij/openapi/actionSystem/SplitButtonAction.java)
|
||
|
||
</tldr>
|
||
|
||
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](toolbar.md#what-items-to-add-on-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}
|
||
|