diff --git a/images/ui/tabs/01_Tabs.png b/images/ui/tabs/01_Tabs.png new file mode 100644 index 00000000000..5140ce79a4f Binary files /dev/null and b/images/ui/tabs/01_Tabs.png differ diff --git a/images/ui/tabs/01_Tabs_dark.png b/images/ui/tabs/01_Tabs_dark.png new file mode 100644 index 00000000000..8be7ffd0b95 Binary files /dev/null and b/images/ui/tabs/01_Tabs_dark.png differ diff --git a/images/ui/tabs/02_How_to_use_correct.png b/images/ui/tabs/02_How_to_use_correct.png new file mode 100644 index 00000000000..a0e4d786a16 Binary files /dev/null and b/images/ui/tabs/02_How_to_use_correct.png differ diff --git a/images/ui/tabs/02_How_to_use_correct_dark.png b/images/ui/tabs/02_How_to_use_correct_dark.png new file mode 100644 index 00000000000..39e78dce9ca Binary files /dev/null and b/images/ui/tabs/02_How_to_use_correct_dark.png differ diff --git a/images/ui/tabs/02_How_to_use_incorrect.png b/images/ui/tabs/02_How_to_use_incorrect.png new file mode 100644 index 00000000000..06bb4c53564 Binary files /dev/null and b/images/ui/tabs/02_How_to_use_incorrect.png differ diff --git a/images/ui/tabs/02_How_to_use_incorrect_dark.png b/images/ui/tabs/02_How_to_use_incorrect_dark.png new file mode 100644 index 00000000000..a7edd8ba4b8 Binary files /dev/null and b/images/ui/tabs/02_How_to_use_incorrect_dark.png differ diff --git a/images/ui/tabs/03_How_to_use.png b/images/ui/tabs/03_How_to_use.png new file mode 100644 index 00000000000..b9933d742c2 Binary files /dev/null and b/images/ui/tabs/03_How_to_use.png differ diff --git a/images/ui/tabs/03_How_to_use_dark.png b/images/ui/tabs/03_How_to_use_dark.png new file mode 100644 index 00000000000..b2cd9676fca Binary files /dev/null and b/images/ui/tabs/03_How_to_use_dark.png differ diff --git "a/images/ui/tabs/04_Placement\357\273\277_correct.png" "b/images/ui/tabs/04_Placement\357\273\277_correct.png" new file mode 100644 index 00000000000..4befa6dd9ad Binary files /dev/null and "b/images/ui/tabs/04_Placement\357\273\277_correct.png" differ diff --git "a/images/ui/tabs/04_Placement\357\273\277_correct_dark.png" "b/images/ui/tabs/04_Placement\357\273\277_correct_dark.png" new file mode 100644 index 00000000000..3ea66e43733 Binary files /dev/null and "b/images/ui/tabs/04_Placement\357\273\277_correct_dark.png" differ diff --git "a/images/ui/tabs/04_Placement\357\273\277_incorrect.png" "b/images/ui/tabs/04_Placement\357\273\277_incorrect.png" new file mode 100644 index 00000000000..fc520faf8f3 Binary files /dev/null and "b/images/ui/tabs/04_Placement\357\273\277_incorrect.png" differ diff --git "a/images/ui/tabs/04_Placement\357\273\277_incorrect_dark.png" "b/images/ui/tabs/04_Placement\357\273\277_incorrect_dark.png" new file mode 100644 index 00000000000..8996e7aadb6 Binary files /dev/null and "b/images/ui/tabs/04_Placement\357\273\277_incorrect_dark.png" differ diff --git "a/images/ui/tabs/05_Placement\357\273\277_incorrect.png" "b/images/ui/tabs/05_Placement\357\273\277_incorrect.png" new file mode 100644 index 00000000000..610705160c0 Binary files /dev/null and "b/images/ui/tabs/05_Placement\357\273\277_incorrect.png" differ diff --git "a/images/ui/tabs/05_Placement\357\273\277_incorrect_dark.png" "b/images/ui/tabs/05_Placement\357\273\277_incorrect_dark.png" new file mode 100644 index 00000000000..e9e0577cb84 Binary files /dev/null and "b/images/ui/tabs/05_Placement\357\273\277_incorrect_dark.png" differ diff --git "a/images/ui/tabs/06_Placement\357\273\277_correct-1.png" "b/images/ui/tabs/06_Placement\357\273\277_correct-1.png" new file mode 100644 index 00000000000..c6705d49a26 Binary files /dev/null and "b/images/ui/tabs/06_Placement\357\273\277_correct-1.png" differ diff --git "a/images/ui/tabs/06_Placement\357\273\277_correct.png" "b/images/ui/tabs/06_Placement\357\273\277_correct.png" new file mode 100644 index 00000000000..5d5221e3cfb Binary files /dev/null and "b/images/ui/tabs/06_Placement\357\273\277_correct.png" differ diff --git "a/images/ui/tabs/06_Placement\357\273\277_correct_dark-1.png" "b/images/ui/tabs/06_Placement\357\273\277_correct_dark-1.png" new file mode 100644 index 00000000000..3aae4eeaf43 Binary files /dev/null and "b/images/ui/tabs/06_Placement\357\273\277_correct_dark-1.png" differ diff --git "a/images/ui/tabs/06_Placement\357\273\277_correct_dark.png" "b/images/ui/tabs/06_Placement\357\273\277_correct_dark.png" new file mode 100644 index 00000000000..7567428986f Binary files /dev/null and "b/images/ui/tabs/06_Placement\357\273\277_correct_dark.png" differ diff --git "a/images/ui/tabs/06_Placement\357\273\277_incorrect.png" "b/images/ui/tabs/06_Placement\357\273\277_incorrect.png" new file mode 100644 index 00000000000..3e0d99d8925 Binary files /dev/null and "b/images/ui/tabs/06_Placement\357\273\277_incorrect.png" differ diff --git "a/images/ui/tabs/06_Placement\357\273\277_incorrect_dark.png" "b/images/ui/tabs/06_Placement\357\273\277_incorrect_dark.png" new file mode 100644 index 00000000000..7fde1fe1d5f Binary files /dev/null and "b/images/ui/tabs/06_Placement\357\273\277_incorrect_dark.png" differ diff --git "a/images/ui/tabs/07_Placement\357\273\277_correct.png" "b/images/ui/tabs/07_Placement\357\273\277_correct.png" new file mode 100644 index 00000000000..71b7f5ace4b Binary files /dev/null and "b/images/ui/tabs/07_Placement\357\273\277_correct.png" differ diff --git "a/images/ui/tabs/07_Placement\357\273\277_correct_dark.png" "b/images/ui/tabs/07_Placement\357\273\277_correct_dark.png" new file mode 100644 index 00000000000..f0c8e764c91 Binary files /dev/null and "b/images/ui/tabs/07_Placement\357\273\277_correct_dark.png" differ diff --git a/images/ui/tabs/01_tabs_example.png b/images/ui/tabs/old/01_tabs_example.png similarity index 100% rename from images/ui/tabs/01_tabs_example.png rename to images/ui/tabs/old/01_tabs_example.png diff --git a/images/ui/tabs/02_naming.png b/images/ui/tabs/old/02_naming.png similarity index 100% rename from images/ui/tabs/02_naming.png rename to images/ui/tabs/old/02_naming.png diff --git a/images/ui/tabs/03_hidden_tabs.png b/images/ui/tabs/old/03_hidden_tabs.png similarity index 100% rename from images/ui/tabs/03_hidden_tabs.png rename to images/ui/tabs/old/03_hidden_tabs.png diff --git a/images/ui/tabs/04_layout_border_correct.png b/images/ui/tabs/old/04_layout_border_correct.png similarity index 100% rename from images/ui/tabs/04_layout_border_correct.png rename to images/ui/tabs/old/04_layout_border_correct.png diff --git a/images/ui/tabs/04_layout_border_incorrect.png b/images/ui/tabs/old/04_layout_border_incorrect.png similarity index 100% rename from images/ui/tabs/04_layout_border_incorrect.png rename to images/ui/tabs/old/04_layout_border_incorrect.png diff --git a/images/ui/tabs/05_bordered.png b/images/ui/tabs/old/05_bordered.png similarity index 100% rename from images/ui/tabs/05_bordered.png rename to images/ui/tabs/old/05_bordered.png diff --git a/images/ui/tabs/06_layout_content_under.png b/images/ui/tabs/old/06_layout_content_under.png similarity index 100% rename from images/ui/tabs/06_layout_content_under.png rename to images/ui/tabs/old/06_layout_content_under.png diff --git a/images/ui/tabs/07_inset.png b/images/ui/tabs/old/07_inset.png similarity index 100% rename from images/ui/tabs/07_inset.png rename to images/ui/tabs/old/07_inset.png diff --git a/topics/ui/controls/tabs.md b/topics/ui/controls/tabs.md index f9ed4b7baea..eaf3e541e12 100644 --- a/topics/ui/controls/tabs.md +++ b/topics/ui/controls/tabs.md @@ -10,63 +10,85 @@ -Tabs organize content in dialogs by grouping similar UI controls. -![](01_tabs_example.png){width=322} - -In code editors, tabs are created with another component — [`JBEditorTabs`](%gh-ic%/platform/platform-api/src/com/intellij/ui/tabs/impl/JBEditorTabs.kt). It supports extended functionality like icons, closeable, and draggable tabs. Do **not** use this component in dialogs. - -In tool windows, tabs are generated automatically. See also [Tool window](tool_window.md). +![Tabs](01_Tabs.png){width=706} ## When to use -Follow the rules in [Groups of controls](groups_of_controls.md). +Use tabs to organize related content. Follow rules of [Groups of controls](groups_of_controls.md). + +> For editor tabs, use another component — [`JBEditorTabs`](%gh-ic%/platform/platform-api/src/com/intellij/ui/tabs/impl/JBEditorTabs.kt) +> +>In tool windows, tabs are generated automatically. See also [Tool window](tool_window.md). +> +{style="note"} ## How to use -Use title capitalization for tab labels. +### Label + +* Use title capitalization for tab labels. +* Make labels short, preferably no more than 3 words. +* Avoid generic words such as "General" or "Advanced". -Make the label short, preferably no more than 3 words. -Avoid generic words, such as "General" or "Advanced". See [Writing short and clear](writing_short.md). -![](02_naming.png){width=284} + +Correct +![Hiding tabs that do not fit](02_How_to_use_correct.png){width=706} + +Incorrect +![Hiding tabs that do not fit](02_How_to_use_incorrect.png){width=706} + + +### Tab Order and Layout Place the most frequently used content in the first tab. -Tabs that do not fit allotted screen space automatically hide under the dropdown component. -(It is better to add no more than 8 tabs, but this number is not limited.) -![](03_hidden_tabs.png){width=533} +Tabs that do not fit allotted screen space automatically hide under the dropdown component. It is better to add no more than 8 tabs, but this number is not limited. -Always place tabs on top. It is possible to place them at other sides of the content — bottom, left, or right — but such a placement is extremely rare and might confuse users. +![Hiding tabs that do not fit](03_How_to_use.png){width=706} + +### Unavailable content Do not remove or disable a tab when its function is unavailable. Explain why a tab’s content is unavailable in the body of the tab. ## Placement -Make sure the border of the tab reaches the edges of the area tabs occupy. +### Position + +Always place tabs on top of the content. It is possible to place them at other sides — bottom, left, or right — but such a placement is extremely rare and might confuse users. -Incorrect -![](04_layout_border_incorrect.png){width=595} +### Independent content -Correct +Do not place independent content under the tabs. Create separate tabs for such content. -![](04_layout_border_correct.png){width=595} +Correct -Do **not** surround the tab content area with a visible border. +![Correct placment of independent content](06_Placement_correct.png){width=706} -Incorrect +Incorrect -![](05_bordered.png){width=595} +![Incorrect placement of independent content](06_Placement_incorrect.png){width=706} -Avoid placing independent content groups under the tabs' area. +### Controls above tabs +When there are other UI controls above tabs, separate them with a vertical indent. -Incorrect +![UI controls above the tabs](07_Placement_correct.png){width=706} -![](06_layout_content_under.png){width=595} +### Tabs border -When there are other UI controls above tabs, separate them with a vertical indent. +* Make sure the border of the tab reaches the edges of the area tabs occupy. +* Do **not** surround the tab content area with a visible border. + +Correct +![Correct bottom border](04_Placement_correct.png){width=706} + +Incorrect + +![Incorrect bottom border](04_Placement_incorrect.png){width=706} -![](07_inset.png){width=595} +Incorrect +![Frame around the tab content](05_Placement_incorrect.png){width=706}