Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Light 指示灯

提供各种状态的指示灯

用于状态指示

Demo

通过设置属性 IsFlash 使指示灯进行闪烁

Demo

Attributes

Loading...
@page "/lights"

<h3>Light 指示灯</h3>

<h4>提供各种状态的指示灯</h4>

<Block Title="普通用法" Introduction="用于状态指示">
    <div class="row g-3">
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Danger"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Info"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Warning"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Primary"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Secondary"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Dark"></Light>
        </div>
    </div>
</Block>

<Block Title="闪烁" Introduction="通过设置属性 <code>IsFlash</code> 使指示灯进行闪烁">
    <div class="row g-3">
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light IsFlash="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Danger" IsFlash="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Info" IsFlash="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Warning" IsFlash="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Primary" IsFlash="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Secondary" IsFlash="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Dark" IsFlash="true"></Light>
        </div>
    </div>
</Block>

<AttributeTable Items="GetAttributes()"></AttributeTable>
// 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 Lights
    {
        /// <summary>
        /// 
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes()
        {
            return new AttributeItem[]
            {
                new AttributeItem() {
                    Name = "Color",
                    Description = "颜色",
                    Type = "Color",
                    ValueList = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
                    DefaultValue = "Success"
                },
                new AttributeItem() {
                    Name = "IsFlash",
                    Description = "是否闪烁",
                    Type = "boolean",
                    ValueList = " — ",
                    DefaultValue = "false"
                },
                new AttributeItem() {
                    Name = "Title",
                    Description = "指示灯 Tooltip 显示文字",
                    Type = "string",
                    ValueList = " — ",
                    DefaultValue = " — "
                }
            };
        }
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload