Skip to content

Latest commit

 

History

History
89 lines (69 loc) · 2.62 KB

appearance.md

File metadata and controls

89 lines (69 loc) · 2.62 KB
title page_title description slug tags published position
Appearance
Skeleton Appearance
Appearance settings of the Skeleton for Blazor.
skeleton-appearance
telerik,blazor,skeleton,appearance
true
5

Appearance Settings

This article explains how to control the visual appearance of the Skeleton component.

The Skeleton component provides multiple parameters that control its appearance:

ShapeType

The ShapeType parameter sets the shape of the Skeleton. It takes a member of the SkeletonShapeType enum:

  • Text (default)
  • Rectangle
  • Circle

caption Change the ShapeType

@*This example shows the difference between the shapes of the Skeleton*@

<div class="row">
    <div class="col-4" style="position: relative;">
        <TelerikSkeleton ShapeType="@SkeletonShapeType.Circle"
                         Width="50px" Height="50px" Visible="true">
        </TelerikSkeleton>
    </div>
    <div class="col-4" style="position: relative;">
        <TelerikSkeleton ShapeType="@SkeletonShapeType.Rectangle"
                         Width="50px" Height="50px" Visible="true">
        </TelerikSkeleton>
    </div>
    <div class="col-4" style="position: relative;">
        <TelerikSkeleton ShapeType="@SkeletonShapeType.Text"
                         Width="50px" Height="50px" Visible="true">
        </TelerikSkeleton>
    </div>
</div>

AnimationType

The AnimationType parameter controls the type of animation for the Skeleton. There are three predefined options, which are members of the SkeletonAnimationType enum:

  • None
  • Pulse (default)
  • Wave

caption The animations for the Skeleton

@* The different animations for the Skeleton. *@

<div class="row">
    <div class="col-4" style="position:relative;">
        <TelerikSkeleton AnimationType="@SkeletonAnimationType.None"
                         Width="50px" Height="50px" Visible="true">
        </TelerikSkeleton>
    </div>
    <div class="col-4" style="position:relative;">
        <TelerikSkeleton AnimationType="@SkeletonAnimationType.Pulse"
                         Width="50px" Height="50px" Visible="true">
        </TelerikSkeleton>
    </div>
    <div class="col-4" style="position:relative;">
        <TelerikSkeleton AnimationType="@SkeletonAnimationType.Wave"
                         Width="50px" Height="50px" Visible="true">
        </TelerikSkeleton>
    </div>
</div>

@template

See Also