Karol Lewandowski d8e83b57ea
UI Guidelines (#1308)
* 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 '&nbsp;'

* 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>
2024-05-16 13:51:56 +02:00

43 lines
1.2 KiB
Markdown

<!-- Copyright 2000-2024 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -->
# Groups of Controls
<link-summary>Grouping content to help users locate the necessary controls faster.</link-summary>
Group controls to organize content on a screen and help people locate the necessary controls faster.
Use the following controls or layouts:
* [Group headers](group_header.md)
* [Tabs](tabs.md)
* Master-detail layout
## What grouping to choose
Use **group headers** if all rules apply:
> If there are less than 3 controls in all groups, consider separating with [vertical insets](group_header.md#how-to-use).
>
{style="note"}
* Each group contains **no** more than 10 controls
* All groups occupy no more than 2 heights of the dialog in its default size
![](6_01_group_headers.png){width=396}
Use **tabs** if all rules apply:
* One of the groups contains more than 10 controls, or groups occupy more than 2 heights of a dialog
* There are **no** more than 8 groups
![](01_use_tabs.png){width=565}
Use the **master-detail layout** if either of the rules applies:
* There are more than 8 groups
* The number of groups can change
![](02_use_master_detail.png){width=565}