Different Link Designs
ui5-linkis a hyperlink component that is used to navigate to other apps and web pages, or to trigger actions. It is a clickable text element, visualized in such a way that it stands out from the standard text. On hover, it changes its style to an underlined text to provide additional feedback to the user.
UsageYou can set the
ui5-linkto be enabled or disabled.
To create a visual hierarchy in large lists of links, you can set the less important links as
Subtleor the more important ones as
Emphasized, by using the
hrefproperty is set, the link behaves as the HTML anchor tag (
<a><a/>) and opens the specified URL in the given target frame (
targetproperty). To specify where the linked content is opened, you can use the
Responsive behaviorIf there is not enough space, the text of the
ui5-linkbecomes truncated. If the
wrappingTypeproperty is set to
"Normal", the text is displayed on several lines instead of being truncated.
ES6 Module Import
You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.
Note: Avaialble options are
Note: When disabled, the click event cannot be triggered by the user.
Note: Standard hyperlink behavior is supported.
hrefproperty is set.
None- The text will be truncated with an ellipsis.
Normal- The text will wrap. The words will not be broken based on hyphenation.
This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the
slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no
slot attribute, goes the the
Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as