This library adds a simple to use component that is aware of whether it is on the screen or not, allowing for features such as infinite scrolling or long complex lists that only render their actual content when on the screen.
Install-Package BytexDigital.Blazor.Components.Appear
- No requirements
<VisibilityAwareContainer OnAppeared="..." OnDisappeared="..." OnFirstAppeared="..." Tag="div">
<h1>My content</h1>
</VisibilityAwareContainer>
OnAppeared
Fires every time the container gets close to the viewport.OnDisappeared
Fires every time the container leaves the viewport.OnFirstAppeared
Fires only the first time the container appears in the viewport.BoundingBoxMargin
Defaults to 0px. Greater values will makeOnAppeared
fire earlier. View https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options for more details on this option.Tag
The HTML tag used for the container.
This component can be used when you do not want to wrap your content in a VisibilityAwareContainer.
<VisibilityObserver OnFirstAppeared="..."
OnAppeared="..."
OnDisappeared="..."
BoundingBoxMargin="0px"
ElementQuerySelector="#myElementId"
ThresholdInterval="0.1" />
The VisibilityComparer is used to determine the most visible observer of a collection of observers. This can be useful when e.g. implementing nav bars that update their active link according to the currently visible section of the page.
A simple usage example is attached to implement this scenario.
@page "/"
@code {
public string VisibleSectionId { get; set; }
private void Callback(VisibilityObserver obj)
{
VisibleSectionId = obj.ElementQuerySelector;
// Could also use the Data property to decide what to do
// obj.Data~~~~
StateHasChanged();
}
}
<VisibilityComparer OnMostVisibleElementChanged="Callback">
<VisibilityObserver ThresholdInterval="0.1" ElementQuerySelector="#section1" />
<VisibilityObserver ThresholdInterval="0.1" ElementQuerySelector="#section2" />
<!-- You can also the Data property to pass meaningful info through to the callback above. -->
<!-- <VisibilityObserver ThresholdInterval="0.1" ElementQuerySelector="#section2" Data="..." /> -->
</VisibilityComparer>
<header>
<a href="#section1" class="@(VisibleSectionId == "#section1" ? "active" : null)"></a>
<a href="#section2" class="@(VisibleSectionId == "#section2" ? "active" : null)"></a>
</header>
<section id="section1">
...
</section>
<section id="section2">
...
</section>