@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/

using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;

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"
        }
    };
}