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.
<FluentAnchor> wraps the <fluent-anchor> element, a web component implementation of an HTML anchor element leveraging the Fluent UI design system.
The <FluentAnchor> component supports the same visual appearances as the <FluentButton> component (accent, lightweight, neutral, outline, stealth) as well as a hypertext appearance for use inline with text.
Examples
Simple anchors
Default
With target
With aria-label
With custom action
Appearance
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ut aliquam quas quod ipsam cupiditate, voluptate,
corrupti
Anchors with icons
By placing the icon the content of the anchor, it is possible to specify a Color for the icon.
Neutral appearance
Hypertext appearance
By default, the margin between the icon and the link is equal to the margin that is used for the other
appearances. If you find that margin to large, you can add the following to your CSS:
/* for icon at the start */
fluent-anchor[appearance="hypertext"]::part(start) {
margin-inline-end: calc(var(--design-unit) * 1px);
}
/* for icon at the end */
fluent-anchor[appearance="hypertext"]::part(end) {
margin-inline-start: calc(var(--design-unit) * 1px);
}
Do not use these styles if there is no icon being displayed with a hypertext. It will cause the hypertext to get a margin at the start/end.
Documentation
FluentAnchor Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
Appearance | Appearance? | Neutral | Gets or sets the visual appearance. See FluentAnchor.AppearanceDefaults to Appearance.Neutral |
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. | |
Download | string? | Prompts the user to save the linked URL. See a element for more information. | |
Href | string? | Gets or sets the URL the hyperlink references. See a element for more information. Use Target parameter to specify where. | |
Hreflang | string? | Hints at the language of the referenced resource. See a element for more information. | |
IconEnd | Icon? | Gets or sets the Icon displayed at the end of anchor content. | |
IconStart | Icon? | Gets or sets the Icon displayed at the start of anchor content. | |
Ping | string? | See a element for more information. | |
Referrerpolicy | string? | See a element for more information. | |
Rel | string? | See a element for more information. | |
Target | string? | Gets or sets the target attribute that specifies where to open the link, if Href is specified. Possible values: _blank | _self | _parent | _top. | |
Type | string? | See a element for more information. |
EventCallbacks
Name | Type | Description |
|---|---|---|
OnClick | EventCallback |
Methods
Name | Parameters | Type | Description |
|---|---|---|---|
DisposeAsync | ValueTask |