Table of Contents

Class TwOnThisPage

Namespace
TwBlazor.Components
Assembly
TwBlazor.dll

An "On this page" navigation list: a link to each section of the page, with the section currently being read highlighted as the page scrolls.

public class TwOnThisPage : TwBlazorComponentBase, IComponent, IHandleEvent, IHandleAfterRender, ITwComponent, IAsyncDisposable
Inheritance
TwOnThisPage
Implements
Inherited Members

Remarks

The component renders a nav landmark named by its heading. The link to the section being read is marked with aria-current="location", so the highlight is announced by screen readers as well as shown. While Items is empty the landmark is hidden, so an empty navigation is never announced.

Constructors

TwOnThisPage() 

public TwOnThisPage()

Properties

BasePath

Gets or sets the path each link is relative to, e.g. /docs/card, giving links such as /docs/card#usage.

[Parameter]
public string BasePath { get; set; }

Property Value

string

Remarks

Set this to the current page's path in an app with a <base href> (every Blazor app has one), where a bare #usage link would otherwise resolve against the site root instead of the current page.

HeadingLevel

Gets or sets the heading level (1 to 6) of the title. Defaults to 2. Pick the level that fits the page's heading outline.

[Parameter]
public int HeadingLevel { get; set; }

Property Value

int

HideTitle

Gets or sets whether the visible heading is left out. The navigation landmark is then named by Title through aria-label instead, so it is still announced.

[Parameter]
public bool HideTitle { get; set; }

Property Value

bool

Items

Gets or sets the sections to list, in the order they appear on the page. Each Id must be the DOM id of an element on the page.

[Parameter]
public IReadOnlyList<OnThisPageItem> Items { get; set; }

Property Value

IReadOnlyList<OnThisPageItem>

Offset

Gets or sets the distance in pixels from the top of the viewport at which a section counts as the one being read. Raise it when a fixed header covers the top of the page. Defaults to 140.

[Parameter]
public int Offset { get; set; }

Property Value

int

Title

Gets or sets the heading shown above the links. Defaults to the localized "On this page".

[Parameter]
public string? Title { get; set; }

Property Value

string

Methods

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

DisposeAsync()

Removes the scroll listener registered for this component.

public ValueTask DisposeAsync()

Returns

ValueTask

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered interactively and the UI has finished updating (for example, after elements have been added to the browser DOM). Any ElementReference fields will be populated by the time this runs.

This method is not invoked during prerendering or server-side rendering, because those processes are not attached to any live browser DOM and are already complete before the DOM is updated.

Note that the component does not automatically re-render after the completion of any returned Task, because that would cause an infinite render loop.

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

firstRender bool

Set to true if this is the first time OnAfterRender(bool) has been invoked on this component instance; otherwise false.

Returns

Task

A Task representing any asynchronous operation.

Remarks

The OnAfterRender(bool) and OnAfterRenderAsync(bool) lifecycle methods are useful for performing interop, or interacting with values received from @ref. Use the firstRender parameter to ensure that initialization work is only performed once.

Edit this page