Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Spinner 旋转图标

加载数据时显示动效

何时使用
页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。

基础用法

默认旋转图标

Demo
Loading...

Spinner 带有颜色的旋转图标

提供基本颜色的旋转图标

Demo
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Growing Spinner 旋转图标

生长式旋转图标

Demo
Loading...

Growing Spinner 带有颜色的旋转图标

提供基本颜色的旋转图标

Demo
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Spinner 旋转图标大小

图标样式大小

Demo
Loading...
Loading...

Spinner Flex

自定义布局

Demo
Loading...

Spinner Flex

带有文字的自定义布局

Demo
Loading...
Loading...

Spinner Floats

使用 Float 布局

Demo
Loading...

Attributes

Loading...
@page "/spinners"

<h3>Spinner 旋转图标</h3>

<h4>加载数据时显示动效</h4>

<p>
    <b>何时使用</b>
    <br />
    页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。
</p>

<Block Title="基础用法" Introduction="默认旋转图标">
    <Spinner></Spinner>
</Block>

<Block Title="Spinner 带有颜色的旋转图标" Introduction="提供基本颜色的旋转图标">
    <div class="row">
        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Primary"></Spinner></div>
        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Secondary"></Spinner></div>
        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Success"></Spinner></div>
        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Danger"></Spinner></div>
        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Warning"></Spinner></div>
        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Info"></Spinner></div>
        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Light"></Spinner></div>
        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Dark"></Spinner></div>
    </div>
</Block>

<Block Title="Growing Spinner 旋转图标" Introduction="生长式旋转图标">
    <Spinner SpinnerType="SpinnerType.Grow"></Spinner>
</Block>

<Block Title="Growing Spinner 带有颜色的旋转图标" Introduction="提供基本颜色的旋转图标">
    <div class="row">
        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Primary"></Spinner></div>
        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Secondary"></Spinner></div>
        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Success"></Spinner></div>
        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Danger"></Spinner></div>
        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Warning"></Spinner></div>
        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Info"></Spinner></div>
        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Light"></Spinner></div>
        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Dark"></Spinner></div>
    </div>
</Block>

<Block Title="Spinner 旋转图标大小" Introduction="图标样式大小">
    <div class="row">
        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Size="Size.Small"></Spinner></div>
        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Size="Size.Small" SpinnerType="SpinnerType.Grow"></Spinner></div>
    </div>
</Block>

<Block Title="Spinner Flex" Introduction="自定义布局">
    <div class="d-flex justify-content-center">
        <Spinner></Spinner>
    </div>
</Block>

<Block Title="Spinner Flex" Introduction="带有文字的自定义布局">
    <div class="d-flex align-items-center">
        <strong>Loading...</strong>
        <Spinner Class="ml-auto"></Spinner>
    </div>
</Block>

<Block Title="Spinner Floats" Introduction="使用 Float 布局">
    <Spinner Class="float-right"></Spinner>
</Block>

<AttributeTable Items="@GetAttributes()" />
// 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.Shared.Common;
using System.Collections.Generic;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Spinners
    {
        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Class",
                Description = "样式",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Color",
                Description = "颜色",
                Type = "Color",
                ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
                DefaultValue = "Primary"
            },
            new AttributeItem() {
                Name = "Size",
                Description = "尺寸",
                Type = "Size",
                ValueList = "None / ExtraSmall / Small / Medium / Large / ExtraLarge",
                DefaultValue = "None"
            },
            new AttributeItem() {
                Name = "SpinnerType",
                Description = "图标类型",
                Type = "SpinnerType",
                ValueList = " Border / Grow ",
                DefaultValue = "SpinnerType.Border"
            },
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ群: BootstrapAdmin & Blazor(795206915)欢迎加群讨论
An error has occurred. This application may no longer respond until reloaded. Reload