Shapes in Blazor Skeleton Component

6 Dec 20222 minutes to read

The Skeleton component support various built-in shape variants to design layout of the page. You can use the Shape property to create a preview of any layout.

The Skeleton component supports the following content shapes:

Circle skeleton shape

RAZOR

@using Syncfusion.Blazor.Notifications

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

Square skeleton shape

RAZOR

@using Syncfusion.Blazor.Notifications

<SfSkeleton Shape=SkeletonType.Square Width="48px"></SfSkeleton>

Rectangle skeleton shape

RAZOR

@using Syncfusion.Blazor.Notifications

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

Text skeleton shape

RAZOR

@using Syncfusion.Blazor.Notifications

<SfSkeleton Shape=SkeletonType.Text Height="15px"></SfSkeleton>

Below example demonstrates the above functionalities of a Skeleton component.

RAZOR

@using Syncfusion.Blazor.Notifications

<div id="skeletonCard">
    <div class='cardProfile'>
        <SfSkeleton Shape=SkeletonType.Circle Width= "60px"></SfSkeleton>
    </div>
    <div class="cardinfo">
        <SfSkeleton Width="30%" Height='15px'></SfSkeleton><br/>
        <SfSkeleton Width="15%" Height='15px'></SfSkeleton>
    </div>
    <div class="cardContent">
        <SfSkeleton Shape=SkeletonType.Rectangle Width="100%" Height='150px'></SfSkeleton>
    </div>
    <div class="cardoptions">
        <SfSkeleton Shape=SkeletonType.Rectangle Width="20%" Height='32px'></SfSkeleton>
        <SfSkeleton Shape=SkeletonType.Rectangle Width="20%" Height='32px'></SfSkeleton>
    </div>
</div>

<style>
    #skeletonCard {
        padding: 10px;
        line-height: inherit;
        height: 330px;
    }

    #skeletonCard .cardProfile {
        float: left;
        margin-right: 15px;
    }

    #skeletonCard .cardinfo {
        margin-top: 10px;
        overflow: hidden;
    }

    #skeletonCard .cardContent {
        margin: 20px 0px 20px;
    }

    #skeletonCard .cardoptions {
        display: flex;
        justify-content: space-between;
    }
</style>