
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
Suitable for display when loading avatars, pictures, etc.
Demo
It can be set to a circle display by setting the Circle
property
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
.
Suitable for display when the edit form is loaded
Demo
Applicable to display when the edit table is loaded
Demo
Display when tree component is loaded
Demo
@page "/skeletons"
@inject IStringLocalizer<Skeletons> Localizer
<h3>Skeleton</h3>
<h4>Provide a placeholder graphic combination where you need to wait for content to load</h4>
<p><b>When to use</b></p>
<ul class="ul-demo">
<li>When the network is slow and it takes a long time to wait for the loading process</li>
<li>Lists/cards with more graphic information content</li>
<li>Only used when loading data for the first time</li>
<li>Can be completely replaced by Spin, but can provide better visual effects and user experience than Spin in available scenarios</li>
</ul>
<DemoBlock Title="Picture frame" Introduction="Suitable for display when loading avatars, pictures, etc." Name="Img">
<p>It can be set to a circle display by setting the <code>Circle</code> property</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>
</DemoBlock>
<DemoBlock Title="Paragraph skeleton" Introduction="Applicable to display when loading large paragraphs of text and other types" Name="Paragraph">
<p>The default paragraph skeleton screen only displays three lines. If you need multiple lines to occupy space, please place multiple <code>SkeletonParagraph</code>.</p>
<SkeletonParagraph />
</DemoBlock>
<DemoBlock Title="Form skeleton" Introduction="Suitable for display when the edit form is loaded" Name="Form">
<SkeletonEditor />
</DemoBlock>
<DemoBlock Title="Table skeleton" Introduction="Applicable to display when the edit table is loaded" Name="Table">
<SkeletonTable />
</DemoBlock>
<DemoBlock Title="Tree skeleton" Introduction="Display when tree component is loaded" Name="Tree">
<SkeletonTree />
</DemoBlock>
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public partial class Skeletons
{
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
new AttributeItem() {
Name = nameof(SkeletonTable.Round),
Description = "是否显示圆角",
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
},
new AttributeItem() {
Name = nameof(SkeletonTable.Active),
Description = "是否显示动画",
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
},
new AttributeItem() {
Name = nameof(SkeletonTable.Rows),
Description = "骨架屏默认显示行数",
Type = "bool",
ValueList = "int",
DefaultValue = "7"
},
new AttributeItem() {
Name = nameof(SkeletonTable.Columns),
Description = "骨架屏默认显示列数",
Type = "bool",
ValueList = "int",
DefaultValue = "3"
},
new AttributeItem() {
Name = nameof(SkeletonTable.ShowToolbar),
Description = "是否显示 Toolbar",
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
}
};
}