mirror of
https://github.com/JetBrains/intellij-sdk-code-samples.git
synced 2025-07-30 02:07:50 +08:00
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>
84 lines
2.9 KiB
Markdown
84 lines
2.9 KiB
Markdown
<!-- Copyright 2000-2024 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -->
|
||
|
||
# Banner
|
||
|
||
<link-summary>UI guidelines on using banners.</link-summary>
|
||
|
||
<tldr>
|
||
|
||
**Implementation:** [`EditorNotifications.Provider`](%gh-ic%/platform/platform-api/src/com/intellij/ui/EditorNotifications.java)
|
||
|
||
**Related:** [](notifications.md#editor-banner)
|
||
|
||
</tldr>
|
||
|
||
A banner notification informs the user about the state of a specific context in the project. For example, when there is a missing or broken configuration for some file.
|
||
|
||
{width=796}
|
||
|
||
## When to use
|
||
|
||
Use a banner if user actions should attract attention in a file tab, tool window, or dialog, but are not required immediately.
|
||
|
||
{width=600 style=block}
|
||
*Reconnecting to the database is required to make edits.*
|
||
|
||
{width=500 style=block}
|
||
*The component needs to be installed in order to run the available virtual devices.*
|
||
|
||
Do **not** use a banner if there is no particular UI component it can be tied to. Use a [balloon notification](balloon.md) in the main window instead.
|
||
|
||
For all other cases, choose another notification type.
|
||
|
||
### Types of banners
|
||
|
||
#### Information
|
||
|
||
Use when actions can improve the user’s workflow, but are considered optional and can be safely ignored.
|
||
|
||
{width=733 style=block}
|
||
*The new tool window UI is suggested to improve the workflow for version control.*
|
||
|
||
#### Warning
|
||
|
||
Use to suggest actions that can impact the user’s workflow.
|
||
|
||
{width=698 style=block}
|
||
*Generated files should be edited directly.*
|
||
|
||
#### Error
|
||
|
||
Use to suggest actions that are required to unblock the user’s workflow.
|
||
|
||
{width=796 style=block}
|
||
*Syntax highlighting and other inspections are broken until a JDK is defined for the project.*
|
||
|
||
## How to use
|
||
|
||
{width=504}
|
||
|
||
### Message
|
||
|
||
* The message should be [short and descriptive](writing_short.md) (two sentences at most) and follow the [Punctuation](punctuation.md) guide.
|
||
* Use sentence case capitalization.
|
||
|
||
### Actions
|
||
|
||
* The action name should be [short and descriptive](writing_short.md), preferably not longer than two–three words.
|
||
* Use sentence case capitalization.
|
||
* Limit the number of actions to two to make the call to action clear in the specific context.
|
||
* Use the built-in 'Hide' action instead of creating a separate one.
|
||
|
||
### Icon (optional)
|
||
|
||
* 16x16 icons can be used to complement the message, e.g., a gift icon to advertise functionality.
|
||
|
||
### Placement
|
||
|
||
* Place the banner at the top of the related UI component.
|
||
* It can float or be adjacent to the content, depending on the amount of the available space and whether or not the content’s vertical shifting needs to be minimized.
|
||
|
||
{width=509}
|
||
|
||
*The banner floats on top of the preview surface to reduce shifting during code editing.*
|