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>
4.1 KiB
Toolbar Drop-Down List
UI guidelines on using toolbar drop-down lists.
Implementation: ComboBoxButton
A toolbar drop-down list is a type of button that appears on a horizontal toolbar and shows a list of choices on clicking it.
{width=205}
When to use
Use toolbar drop-down if a single option should be selected.
If the choices are objects or states.
To select values that are controlled by the toolbar button on the right.
{width=209}
To filter values or change the appearance in the control below:
{width=244}
Use a toolbar drop-down button instead of a drop-down list in the following cases:
- If there is a list of actions:
{width=136}
-
The options are secondary and the user won’t change them in most cases.
-
Multi-selection is required, for example, to group by several attributes.
Do not use toolbar drop-down in dialogs, use the drop-down list instead.
| Incorrect | Correct |
|---|---|
 {width="302"} |
 {width="302"} |
How to use
Do not add a label to the toolbar drop-down.
For the default value, follow the rules for the drop-down list.
Add separators between the toolbar drop-down and icons:
{width=313}
If a drop-down is controlled by buttons, add a border, as separators will break the connection between the controlling icons and the drop-down:
{width=209}
The toolbar drop-down does not get the focus. Highlight it on hover the same way as toolbar icons.
{width=209}
Menu
Control
Open the drop-down menu when clicking anywhere on a drop-down list. Open the menu down by default. If there is not enough space, open the menu up.
Select the first option when the menu opens.
Move the selection in the menu on pressing the Up and Down arrows or on hovering the cursor over the item.
Filter items in the list on typing:
{width=209}
Close the menu if the user selects an item, clicks outside the menu, presses the Esc key or switches to another app.
Allow single-click activation using mouse: click on a drop-down, the drop-down opens, select an item by hovering, close the drop-down with the new item selected by releasing the mouse button.
Menu items
Follow the rules for the drop-down list.
If it’s necessary to configure options in a toolbar drop-down list, add customization actions at the top or at the bottom of the list and separate them with a line. Use title case capitalization for actions.
{width=201}
A toolbar drop-down list can have submenus.
Submenu
A submenu is a menu item that shows a list of nested items. A submenu includes a triangular indicator that distinguishes it from other menu items.
Use item submenus to group related options and to show hierarchy:
{width=272}
Show the submenu list on hovering over an item.
If the selection moves with the Up and Down arrow keys, show the submenu list on pressing the Right arrow or the Enter key.
Avoid submenus inside submenus. Submenus hide choices too deep and are difficult to navigate.
Sizes and placement
Toolbar drop-down sizes are the same for all themes.
{width=181}
The width changes depending on the selected value to save space if the value is short.
{width=169}
For menu sizes see Drop-down menu.