Link3.0
The Link component enables users to navigate between pages with a single click. Styled to mimic a traditional hyperlink, it semantically renders as an HTML `<a>` element.
Ads by Tryg Careers
Installation
npm i @tryg/ui-libraryUsage
Individual only imports the desired component, and only needs to be included once within the application. Which is beneficial to keep the application size small.
<script type="module">
import { defineCustomElement } from '@tryg/ui-library/dist/components/anchor-link';
defineCustomElement();
</script>
<anchor-link href="http://tryg.com/">Some text here</anchor-link>Global only needs to be defined once in the application, but it will import all components even the ones that are not in use..
<script type="module">
import { defineCustomElements } from '@tryg/ui-library/dist/loader';
defineCustomElements();
</script>
<anchor-link href="http://tryg.com/">Some text here</anchor-link>Inside of a paragraph
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, <anchor-link href="http://tryg.com/">consectetur</anchor-link>, adipisci velit...Variants
<anchor-link href="http://tryg.com/" variant="black">Some text here</anchor-link>
<anchor-link href="http://tryg.com/" variant="brand">Some text here</anchor-link>
<anchor-link href="http://tryg.com/" variant="white">Some text here</anchor-link>External
<anchor-link href="http://tryg.com/" is-external>Some text here</anchor-link>API
anchor-link
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
download | download | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). Documentation | string | undefined |
href | href | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. Documentation | string | undefined |
isExternal | is-external | Marking the link as external will add target="_blank" and rel="noopener noreferrer" attributes to the link, along with an icon illustrating to the user they're about to leave the page. | boolean | undefined |
ping | ping | The ping property is a space-separated list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Documentation | string | undefined |
referrerpolicy | referrerpolicy | How much of the referrer to send when following the link. Documentation | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | undefined |
rel | rel | Specifies the relationship of the target object to the link object. The value is a space-separated list of link types. | string | undefined |
target | target | Specifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top". Documentation | "_blank" | "_parent" | "_self" | "_top" | undefined |
type | type | Hints at the linked URL's format with a MIME type. No built-in functionality. Documentation | string | undefined |
variant | variant | "black" | "brand" | "white" | 'black' |
Dependencies
Depends on
Graph
Built with StencilJS