Class SfSkeleton

The Skeleton is a placeholder that animates a shimmer effect to let users know that the page’s content is loading at the moment. In other terms, it simulates the layout of page content while loading the actual content.

Inheritance

System.Object

SfSkeleton

Namespace: Syncfusion.Blazor.Notifications

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfSkeleton : ComponentBase

Remarks

The Width property will be prioritize and used as dimension for Circle and Square Shape.

Examples

Skeleton with default text shape.

<SfSkeleton Width="100%" Height="10px"></SfSkeleton>

Skeleton with rectangle Shape.

<SfSkeleton Width="100px" Height="50px" Shape="SkeletonType.Rectangle"></SfSkeleton>

Skeleton with fade effect Effect.

<SfSkeleton Width="50pt" Shape="SkeletonType.Circle" Effect="ShimmerEffect.Fade"></SfSkeleton>

Constructors

SfSkeleton()

Declaration

public SfSkeleton()

Properties

CssClass

Gets or sets a value that indicates the CSS class string to customize the appearance of Skeleton.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	Accepts a CSS class string separated by space to customize the appearance of Skeleton. The default value is string.Empty.

Examples

In the below code example, Skeleton background color has been customized by using CssClass property.

<SfSkeleton CssClass="customize-skeleton" Width="100px" Shape="SkeletonType.Circle"></SfSkeleton>
<style>
.e-skeleton.customize-skeleton {
    background-color:darkgray;
}
</style>

Effect

Gets or sets a value that indicates the animation effect of the Skeleton.

Declaration

public ShimmerEffect Effect { get; set; }

Property Value

Type	Description
ShimmerEffect	One of the ShimmerEffect enumeration. The default value is Wave.

Examples

Skeleton with fade effect.

<SfSkeleton Effect="ShimmerEffect.Fade" Width="50px" Shape="SkeletonType.Circle"></SfSkeleton>

Skeleton with pulse effect.

<SfSkeleton Effect="ShimmerEffect.Pulse" Width="50px" Shape="SkeletonType.Circle"></SfSkeleton>

Skeleton with no effect.

<SfSkeleton Effect="ShimmerEffect.None" Width="100px" Height="10px"></SfSkeleton>

Height

Gets or sets a value that defines the height of the Skeleton.

Declaration

public string Height { get; set; }

Property Value

Type	Description
System.String	Accept the CSS units as string value. The default value is null.

Remarks

Not required to define this property when Shape is Circle and Square.

Examples

Skeleton with 10px height applied for Text.

<SfSkeleton Width="100px" Height="10px"></SfSkeleton>

Label

Gets or sets a value that defines 'aria-label' for Skeleton accessibility.

Declaration

public string Label { get; set; }

Property Value

Type	Description
System.String	Accepts a string value. The default value is Loading....

Examples

Skeleton with custom ARIA label.

<SfSkeleton Label="Fetching data..." Width="50px" Shape="SkeletonType.Circle"></SfSkeleton>

Shape

Gets or sets a value that indicates the shape of the Skeleton.

Declaration

public SkeletonType Shape { get; set; }

Property Value

Type	Description
SkeletonType	One of the SkeletonType enumeration. The default value is Text.

Remarks

If the SkeletonType isCircle orSquare, the width property value will be prioritize and used as dimension when Shape is Circle and Square.

Visible

Gets or sets the visibility state of the Skeleton.

Declaration

public bool Visible { get; set; }

Property Value

Type	Description
System.Boolean	true, if the Skeleton is in visible state; otherwise, false. The default value is true.

Examples

Skeleton rendered with hidden state.

<SfSkeleton Visible="false" Width="50px" Shape="SkeletonType.Square"></SfSkeleton>

Width

Gets or sets a value that defines the width of the Skeleton.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	Accept the CSS units as string value. The default value is null.

Remarks

The property will be prioritize and used as dimension when Shape is Circle and Square.

Examples

Skeleton with 50px radius applied for Circle.

<SfSkeleton Width="50px" Shape="SkeletonType.Circle"></SfSkeleton>

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

OnInitializedAsync()

Declaration

protected override Task OnInitializedAsync()

Returns

Type
System.Threading.Tasks.Task

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
System.Threading.Tasks.Task