Bootstrap Blazor - 企业级 UI 组件库

Enterprise-level component library based on Bootstrap and Blazor

Example Razor C#Video

Skeleton

Provide a placeholder graphic combination where you need to wait for content to load

When to use

When the network is slow and it takes a long time to wait for the loading process
Lists/cards with more graphic information content
Only used when loading data for the first time
Can be completely replaced by Spin, but can provide better visual effects and user experience than Spin in available scenarios

Picture frame screen

Suitable for display when loading avatars, pictures, etc.

Demo

It can be set to a circle display by setting the Circle property

Paragraph skeleton screen

Applicable to display when loading large paragraphs of text and other types

Demo

The default paragraph skeleton screen only displays three lines. If you need multiple lines to occupy space, please place multiple SkeletonParagraph.

Form skeleton screen

Suitable for display when the edit form is loaded

Demo

Table skeleton screen

Applicable to display when the edit table is loaded

Demo

@page "/skeletons"
@inject IStringLocalizer<Skeletons> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["H1"]</h4>

<p><b>@Localizer["b1"]</b></p>

<ul class="ul-demo">
    <li>@Localizer["Li1"]</li>
    <li>@Localizer["Li2"]</li>
    <li>@Localizer["Li3"]</li>
    <li>@Localizer["Li4"]</li>
</ul>

<Block Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]">
    <p>@((MarkupString)Localizer["P1"].Value)</p>
    <div class="row g-3 skeleton-demo">
        <div class="col-4">
            <SkeletonAvatar Round="false" />
        </div>
        <div class="col-4">
            <SkeletonAvatar />
        </div>
        <div class="col-4">
            <SkeletonAvatar Circle="true" />
        </div>
    </div>
</Block>

<Block Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]">
    <p>@((MarkupString)Localizer["P2"].Value)</p>
    <SkeletonParagraph />
</Block>

<Block Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]">
    <SkeletonEditor />
</Block>

<Block Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]">
    <SkeletonTable />
</Block>