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.3 KiB
Scrollbar
UI guidelines on using scrollbars.
Implementation: JBScrollBar
The scrollbar allows users to browse content that’s larger than the visible area, such as text or images, by scrolling it horizontally or vertically.
{width=370}
Parts of a scrollbar
A scroll bar consists of a track, a thumb, and a status icon if there is a known status for displayed content.
{width=157}
Track
A track represents the overall length or width of the document.
The track can contain optional markers for quicker navigation between the important parts of the document, for example:
-
The occurrences of a search string.
-
Breakpoints and the current execution lines.
-
A place where an inspection failed.
-
Files with errors laid out in a tree.
-
Changed parts of a file.
A marker can fit the track width or be placed to the left of the track. Use the latter when you expect the marked region to be tall.
Hovering over the track can also show a lens with a preview of the content at the corresponding position in the document. This can be useful in large documents when it is not desirable to change the viewpoint:
{width=622}
Thumb
A thumb represents the visible portion of the content. For example, a small thumb indicates that there’s lots of content available for scrolling.
Status icon (optional)
A status icon shows the overall status of inspections performed on the content and allows you to avoid scrolling over the entire view. If at least one inspection has failed, the overall status should be the status of that inspection.
{width=492}
How to use
Respect the OS settings when showing the scrollbar. For example, on macOS you can hide the scrollbar until you scroll the content. Always show the scrollbar when it is important to understand which part of the content is currently shown. For example, the scrollbar in the Editor helps users understand the location of the current code fragment and the overall size of the currently opened file.
Show the track on hover to make the clickable area clearer. Consider not showing the track on hover if it might have more than 5–10 stripes at a time.
Increase the thumb contrast against the background on hover and when scrolling to make it more prominent.
Clicking the track above/below the thumb scrolls one page up/down the viewpoint. This allows you to hide the up/down icons on the scrollbar to lessen the visual noise and to scroll with mouse-clicks. Track markers serve as a mini-map of the document. If they are present, clicking them takes you to the position that this marker is pointing to without having to scroll down the page. Change the cursor to "Hand" when hovering such scrollbars.
When showing a text, wrap it instead of showing the horizontal scrollbar when possible. With both scrollbars, it is harder to manipulate the content.
Incorrect
{width=500}
Correct
{width=500}
A horizontal scroll bar can be added for code snippets or for formatted input. Use the context menu to enable soft-wrapping.
Correct
{width=370}
Show only 1 scrollbar per table which scrolls the entire table:
Incorrect
{width=562}
Correct
{width=562}
Placement
Reserve the space for a vertical scrollbar if there is a column on the right side, otherwise the scrollbar always overlaps content.
Incorrect
{width=350}
Correct
{width=350}
Style
| Windows/Linux | macOS |
|---|---|
 {width="96"} |
 {width="96"} |