mirror of
https://github.com/JetBrains/intellij-sdk-code-samples.git
synced 2025-07-29 09:47: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>
137 lines
4.5 KiB
Markdown
137 lines
4.5 KiB
Markdown
<!-- Copyright 2000-2024 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -->
|
|
|
|
# Link
|
|
|
|
<link-summary>UI guidelines on using links.</link-summary>
|
|
|
|
<tldr>
|
|
|
|
**Implementation:** [`ActionLink`](%gh-ic%/platform/platform-api/src/com/intellij/ui/components/ActionLink.kt), [`DropDownLink`](%gh-ic%/platform/platform-api/src/com/intellij/ui/components/DropDownLink.kt)
|
|
|
|
</tldr>
|
|
|
|
{width=120}
|
|
|
|
## When to use
|
|
|
|
Use a regular link for navigation between pages of the same window.
|
|
|
|
{width=494}
|
|
|
|
*This option is in the Settings dialog. "Configure servers" opens another page of the same dialog.*
|
|
|
|
{width=411}
|
|
|
|
*Do not use a button to navigate to another page of the same window.*
|
|
|
|
Use an external link for navigation to web resources. See below for the [external link icon](#external-link-icon).
|
|
|
|
{width=248}
|
|
|
|
Use a regular or [drop-down link](#drop-down-link) for secondary actions in packed or small UI areas.
|
|
|
|
{width=367}
|
|
|
|
*The "Reset" action is a link for two reasons: (1) The action appears only when the default value in the field is changed and reverting to a default is considered a rare scenario. (2) A lightweight link fits better than a button in this busy layout.*
|
|
|
|
{width=550}
|
|
|
|
*The "Modify options" drop-down link fits into the top right corner of a busy layout.*
|
|
|
|
Do <control>not</control> use links for primary actions or when a UI is not constrained.
|
|
Use a [button](button.topic) or a [drop down list](drop_down.md) instead.
|
|
These controls can be selected from the keyboard and are bigger and easier to click.
|
|
|
|
{width=451}
|
|
|
|
## How to use
|
|
|
|
### Writing guidelines
|
|
|
|
Use sentence capitalization.
|
|
|
|
Add an ellipsis to a button-link if it opens another UI area where input is possible. See examples for the [Button](button.topic).
|
|
|
|
Do not use words like "navigate" or "click here". A link already implies navigation or clicking.
|
|
|
|
{width=398}
|
|
|
|
When possible, replace "Learn more" and other generic phrases with more informative ones.
|
|
|
|
{width=316}
|
|
|
|
### Link as a part of text
|
|
|
|
A link can be a part of a checkbox or radio button label or of any stand-alone text, like the text in an [empty state](empty_state.md) or in [context help](context_help.md).
|
|
|
|
{width=403}
|
|
|
|
Make a link the minimum phrase that is enough to understand what will happen without reading the whole text.
|
|
|
|
{width=489}
|
|
|
|
### Link in a tree or table
|
|
|
|
Use a link as a secondary action for some items of a tree or table.
|
|
|
|
{width=387}
|
|
|
|
If an action is needed for all items of a tree or table:
|
|
|
|
* Add an [icon button](icon_button.md) to a toolbar.
|
|
* For a list of choices, add a separate table column of drop-down cells (see [Table](table.md#editing-values)).
|
|
* If a link in every tree or table line has meaningful formatting, leave it:
|
|
{width=342}
|
|
*Links in the "Push Commits" window have the format that helps understand the relation between them: "[remote repository] : [branch]". Moving these links elsewhere would break this meaning.*
|
|
|
|
### External link icon
|
|
|
|
Always add the arrow icon for an external link. The icon shows that the user will switch to a browser and lose the current context.
|
|
|
|
{width=248}
|
|
<tabs group="languages">
|
|
<tab title="Kotlin" group-key="kotlin">
|
|
|
|
```kotlin
|
|
val externalLink = ActionLink("External link") {
|
|
BrowserUtil.browse("https://www.jetbrains.com")
|
|
}.apply {
|
|
setExternalLinkIcon()
|
|
}
|
|
```
|
|
|
|
</tab>
|
|
<tab title="Java" group-key="java">
|
|
|
|
```java
|
|
ActionLink externalLink = new ActionLink(
|
|
"External link",
|
|
event -> BrowserUtil.browse("https://www.jetbrains.com")
|
|
);
|
|
externalLink.setExternalLinkIcon();
|
|
```
|
|
|
|
</tab>
|
|
</tabs>
|
|
|
|
An exception is a help topic link in [empty states](empty_state.md).
|
|
The help icon already hints that this is an external help resource, so the arrow icon is unnecessary.
|
|
|
|
{width=164}
|
|
|
|
### Drop-down link
|
|
|
|
Drop-down links show a context menu or a popup.
|
|
Use [`DropDownLink`](%gh-ic%/platform/platform-api/src/com/intellij/ui/components/DropDownLink.kt) to implement a drop-down link.
|
|
|
|
{width=445}
|
|
|
|
## Placement
|
|
|
|
Lay out button-links as buttons and dropdown-links as combo boxes. See [Layout](layout.md).
|
|
|
|
## Built-in behavior
|
|
|
|
A focused link is activated from the keyboard with <shortcut>Space</shortcut>.
|
|
|