Anchor

Anchor Component

The Anchor component is used to create a link.

Inheritance

Anchor : BootstrapComponentBase

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>