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>
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 |