fast-anchor

As defined by the W3C:

An anchor is a piece of text which marks the beginning and/or the end of a hypertext link.

fast-anchor is a web component implementation of an HTML anchor element. The fast-components anchor supports the same visual appearances as the button component (accent, lightweight, neutral, outline, stealth) as well as a hypertext appearance for use inline with text.

Setup

import {
    provideFASTDesignSystem,
    fastAnchor
} from "@microsoft/fast-components";

provideFASTDesignSystem()
    .register(
        fastAnchor()
    );

Usage

Live Editor

<fast-anchor href="https://fast.design" appearance="hypertext">FAST</fast-anchor>

<fast-anchor href="https://fast.design" appearance="hypertext">FAST</fast-anchor>

Result

Loading...

Create your own design

import {
    Anchor,
    anchorTemplate as template,
} from "@microsoft/fast-foundation";
import { anchorStyles as styles } from "./my-anchor.styles";

export const myAnchor = Anchor.compose({
    baseName: "anchor",
    template,
    styles,
    shadowOptions: {
        delegatesFocus: true,
    },
});

note

This component is built with the expectation that focus is delegated to the anchor element rendered into the shadow DOM.

API

class: Anchor

Superclass

Name	Module	Package
FoundationElement	/src/foundation-element/foundation-element.js

Fields

Name	Privacy	Type	Default	Description	Inherited From
download	public	string		Prompts the user to save the linked URL. See <a> element for more information.
href	public	string		The URL the hyperlink references. See <a> element for more information.
hreflang	public	string		Hints at the language of the referenced resource. See <a> element for more information.
ping	public	string		See <a> element for more information.
referrerpolicy	public	string		See <a> element for more information.
rel	public	string		See <a> element for more information.
target	public	"_self" or "_blank" or "_parent" or "_top"		See <a> element for more information.
type	public	string		See <a> element for more information.
control	public	HTMLAnchorElement		References the root element
$presentation	public	ComponentPresentation or null		A property which resolves the ComponentPresentation instance for the current component.	FoundationElement
template	public	ElementViewTemplate or void or null		Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.	FoundationElement
styles	public	ElementStyles or void or null		Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.	FoundationElement

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
templateChanged	protected			void	FoundationElement
stylesChanged	protected			void	FoundationElement

Attributes

Name	Field	Inherited From
download	download
href	href
hreflang	hreflang
ping	ping
referrerpolicy	referrerpolicy
rel	rel
target	target
type	type

CSS Parts

Name	Description
control	The anchor element
content	The element wrapping anchor content

Slots

Name	Description
start	Content which can be provided before the anchor content
end	Content which can be provided after the anchor content
	The default slot for anchor content

---

class: DelegatesARIALink

Fields

Name	Privacy	Type	Default	Description	Inherited From
ariaExpanded	public	"true" or "false" or string or null		See https://www.w3.org/WAI/PF/aria/roles#link for more information

Attributes

Name	Field	Inherited From
aria-expanded	ariaExpanded

---

Additional resources

• Component explorer examples