
Light 指示灯
提供各种状态的指示灯
普通用法
用于状态指示
Demo
闪烁
通过设置属性 IsFlash
使指示灯进行闪烁
Demo
变色
通过设置属性 Color
值使指示灯进行变色
Demo
提示文字
通过设置属性 Title
值使鼠标悬浮指示灯上时提示 tooltip
文字
Demo
Attributes
Loading...
@page "/lights"
<h3>Light 指示灯</h3>
<h4>提供各种状态的指示灯</h4>
<DemoBlock Title="普通用法" Introduction="用于状态指示" Name="Normal">
<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>
</DemoBlock>
<DemoBlock Title="闪烁" Introduction="通过设置属性 <code>IsFlash</code> 使指示灯进行闪烁" Name="Flashing">
<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>
</DemoBlock>
<DemoBlock Title="变色" Introduction="通过设置属性 <code>Color</code> 值使指示灯进行变色" Name="Color">
<div class="row g-3">
<div class="col-12 col-sm-4 col-md-3 col-lg-auto">
<Light IsFlash="true" Color="@Color"></Light>
</div>
</div>
</DemoBlock>
<DemoBlock Title="提示文字" Introduction="通过设置属性 <code>Title</code> 值使鼠标悬浮指示灯上时提示 <code>tooltip</code> 文字" Name="Title">
<div class="row g-3">
<div class="col-12 col-sm-4 col-md-3 col-lg-auto">
<Light Color="Color.Danger" Title="我是提示文字信息"></Light>
</div>
</div>
</DemoBlock>
<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.Components;
using BootstrapBlazor.Shared.Common;
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public partial class Lights : IDisposable
{
private Color Color { get; set; } = Color.Primary;
private CancellationTokenSource UpdateColorTokenSource { get; } = new CancellationTokenSource();
/// <summary>
/// OnAfterRender 方法
/// </summary>
/// <param name="firstRender"></param>
/// <returns></returns>
protected override async Task OnAfterRenderAsync(bool firstRender)
{
try
{
await Task.Delay(2000, UpdateColorTokenSource.Token);
Color = Color switch
{
Color.Primary => Color.Success,
Color.Success => Color.Info,
Color.Info => Color.Warning,
Color.Warning => Color.Danger,
Color.Danger => Color.Secondary,
_ => Color.Primary
};
StateHasChanged();
}
catch (TaskCanceledException)
{
}
}
private static 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 = " — "
}
};
}
/// <summary>
/// Dispose 方法
/// </summary>
protected virtual void Dispose(bool disposing)
{
if (disposing)
{
UpdateColorTokenSource.Cancel();
UpdateColorTokenSource.Dispose();
}
}
/// <summary>
/// Dispose 方法
/// </summary>
public void Dispose()
{
Dispose(true);
GC.SuppressFinalize(this);
}
}