Anchor - MikaBerglund/Blazor-Bootstrap GitHub Wiki

Anchor Component

The Anchor component is used to create a link.

Parameters

Name Type Description
Description string The description of the anchor. This is normally used as the tooltip text when hovering over the anchor.
IgnoreEmptyUrl bool Set to true to render the href attribute even if Url is not set. The default value is true.
Index int Some components ise the index to number anchor items in a collection.
IsActive bool Set to true to add the active class to the resulting <a> element.
IsDisabled bool Specifies whether the anchor is disabled.
IsStretched bool Specifies whether the link is a stretched link. A stretched link will make its containing block element clickable instead of just the link. To specify the containing block, set the .position-relative class on the element you want to be the link container. You can control the container of the stretched link by setting the IsStretchedLinkContainer property on the BootstrapComponentBase base class.
OpenInNewTab bool Specifies whether the anchor should open in a new tab.
Url string The URL of the anchor. If the value starts with #, it is assumed to be followed by the ID of an element that the anchor will scroll to when clicked.
Text string
Link ILInk

Events Callbacks

Name Description
Clicked Fires when the link is clicked.

Examples

Below are some examples on how to use the Anchor component.

Basic Usage

<Anchor Url="page1">Page #1</Anchor>

Anchor Link

The following shows how to use the Anchor component to jump from one place to another on the same page.

<ul>
    <li><Anchor Url="#chapter-1">Chapter 1</Anchor></li>
    <li><Anchor Url="#chapter-2">Chapter 2</Anchor></li>
</ul>

<Heading Id="chapter-1" Leveel="HeadingLevel.H2">Chapter 1</Heading>
<Paragraph>Body of chapter 1</Paragraph>

<Heading Id="chapter-2" Leveel="HeadingLevel.H2">Chapter 2</Heading>
<Paragraph>Body of chapter 2</Paragraph>

Stretched Link

This sample shows you how to use the stretched link feature within an Paragraph component.

<Paragraph>
    This paragraph will not act as the link, since the stretched
    link container is set on the next paragraph.
</Paragraph>
<Paragraph IsStretchedLinkContainer="true">
    Here's some text that all will act as the link,
    even though the actual link is just
    <Anchor Url="/" IsStretched="true">here</Anchor>.
</Paragraph>
⚠️ **GitHub.com Fallback** ⚠️