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.4 KiB
Tabs
UI guidelines on using tabs.
Implementation: JBTabbedPane
Tabs organize content in dialogs by grouping similar UI controls.
{width=322}
In code editors, tabs are created with another component — JBEditorTabs. 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.
When to use
Follow the rules in Groups of controls.
How to use
Use title capitalization for tab labels.
Make the label short, preferably no more than 3 words. Avoid generic words, such as "General" or "Advanced". See Writing short and clear.
{width=284}
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.)
{width=533}
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.
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.
Incorrect
{width=595}
Correct
{width=595}
Do not surround the tab content area with a visible border.
Incorrect
{width=595}
Avoid placing independent content groups under the tabs' area.
Incorrect
{width=595}
When there are other UI controls above tabs, separate them with a vertical indent.
{width=595}