@page "/lights"

<h3>Light 指示灯</h3>

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

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

<Block Title="闪烁" Introduction="通过设置属性 <code>IsFlash</code> 使指示灯进行闪烁">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-4 col-md-3 col-lg-auto">
                <Light IsFlash="true"></Light>
            </div>
            <div class="form-group col-12 col-sm-4 col-md-3 col-lg-auto">
                <Light Color="Color.Danger" IsFlash="true"></Light>
            </div>
            <div class="form-group col-12 col-sm-4 col-md-3 col-lg-auto">
                <Light Color="Color.Info" IsFlash="true"></Light>
            </div>
            <div class="form-group col-12 col-sm-4 col-md-3 col-lg-auto">
                <Light Color="Color.Warning" IsFlash="true"></Light>
            </div>
            <div class="form-group col-12 col-sm-4 col-md-3 col-lg-auto">
                <Light Color="Color.Primary" IsFlash="true"></Light>
            </div>
            <div class="form-group col-12 col-sm-4 col-md-3 col-lg-auto">
                <Light Color="Color.Secondary" IsFlash="true"></Light>
            </div>
            <div class="form-group col-12 col-sm-4 col-md-3 col-lg-auto">
                <Light Color="Color.Dark" IsFlash="true"></Light>
            </div>
        </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 = " — "
                }
            };
        }
    }
}