feat(Light): add IsFlat parameter (#2509)

* feat: 增加 IsFlat 参数

* doc: 更新示例

* feat: 更新 flat 样式

* doc: 更新示例

* refactor: 调整样式防止冲突

* doc: 更新示例

* refactor: 更新示例

* doc: 精简代码

* test: 更新单元测试

src/BootstrapBlazor.Server/Components/Samples/Lights.razor

@@ -55,7 +55,6 @@
             <Light Color="Color.Dark" IsFlash="true"></Light>
         </div>
     </div>
-
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["LightsColorTitle"]" Introduction="@Localizer["LightsColorIntro"]" Name="Color">
@@ -80,4 +79,76 @@
     </div>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["LightsFlatTitle"]" Introduction="@Localizer["LightsFlatIntro"]" Name="Flat">
+    <div class="row g-3">
+        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
+            <Light IsFlat="true"></Light>
+        </div>
+        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
+            <Light Color="Color.Danger" IsFlat="true"></Light>
+        </div>
+        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
+            <Light Color="Color.Info" IsFlat="true"></Light>
+        </div>
+        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
+            <Light Color="Color.Warning" IsFlat="true"></Light>
+        </div>
+        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
+            <Light Color="Color.Primary" IsFlat="true"></Light>
+        </div>
+        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
+            <Light Color="Color.Secondary" IsFlat="true"></Light>
+        </div>
+        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
+            <Light Color="Color.Dark" IsFlat="true"></Light>
+        </div>
+    </div>
+    <div class="row g-3 light-sm">
+        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
+            <Light IsFlat="true"></Light>
+        </div>
+        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
+            <Light Color="Color.Danger" IsFlat="true"></Light>
+        </div>
+        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
+            <Light Color="Color.Info" IsFlat="true"></Light>
+        </div>
+        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
+            <Light Color="Color.Warning" IsFlat="true"></Light>
+        </div>
+        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
+            <Light Color="Color.Primary" IsFlat="true"></Light>
+        </div>
+        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
+            <Light Color="Color.Secondary" IsFlat="true"></Light>
+        </div>
+        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
+            <Light Color="Color.Dark" IsFlat="true"></Light>
+        </div>
+    </div>
+    <div class="row g-3 light-xs">
+        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
+            <Light IsFlat="true"></Light>
+        </div>
+        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
+            <Light Color="Color.Danger" IsFlat="true"></Light>
+        </div>
+        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
+            <Light Color="Color.Info" IsFlat="true"></Light>
+        </div>
+        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
+            <Light Color="Color.Warning" IsFlat="true"></Light>
+        </div>
+        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
+            <Light Color="Color.Primary" IsFlat="true"></Light>
+        </div>
+        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
+            <Light Color="Color.Secondary" IsFlat="true"></Light>
+        </div>
+        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
+            <Light Color="Color.Dark" IsFlat="true"></Light>
+        </div>
+    </div>
+</DemoBlock>
+
 <AttributeTable Items="GetAttributes()"></AttributeTable>

src/BootstrapBlazor.Server/Components/Samples/Lights.razor.css

@@ -0,0 +1,11 @@
+.light-xs, .light-sm {
+    margin-top: 1rem;
+}
+
+    .light-sm ::deep .light {
+        --bb-light-width: 12px;
+    }
+
+    .light-xs ::deep .light {
+        --bb-light-width: 6px;
+    }

src/BootstrapBlazor/Components/Light/Light.razor.cs

@@ -13,7 +13,8 @@ public partial class Light
     /// 获得 组件样式
     /// </summary>
     protected string? ClassString => CssBuilder.Default("light")
-        .AddClass("flash", IsFlash)
+        .AddClass("is-flat", IsFlat)
+        .AddClass("flash", IsFlash && !IsFlat)
         .AddClass($"light-{Color.ToDescriptionString()}", Color != Color.None)
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
@@ -24,6 +25,12 @@ public partial class Light
     [Parameter]
     public bool IsFlash { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否为平面图形 默认 false
+    /// </summary>
+    [Parameter]
+    public bool IsFlat { get; set; }
+
     /// <summary>
     /// 获得/设置 指示灯颜色 默认为 Success 绿色
     /// </summary>

src/BootstrapBlazor/Components/Light/Light.razor.scss

@@ -50,87 +50,117 @@
         display: none;
     }
 
+    &.is-flat {
+        --bb-light-danger-bg: var(--bs-danger);
+        --bb-light-danger-hover-bg: var(--bs-danger);
+        --bb-light-success-bg: var(--bs-success);
+        --bb-light-success-hover-bg: var(--bs-success);
+        --bb-light-info-bg: var(--bs-info);
+        --bb-light-info-hover-bg: var(--bs-info);
+        --bb-light-warning-bg: var(--bs-warning);
+        --bb-light-warning-hover-bg: var(--bs-warning);
+        --bb-light-primary-bg: var(--bs-primary);
+        --bb-light-primary-hover-bg: var(--bs-primary);
+        --bb-light-secondary-bg: var(--bs-secondary);
+        --bb-light-secondary-hover-bg: var(--bs-secondary);
+        --bb-light-dark-bg: var(--bs-dark);
+        --bb-light-dark-hover-bg: var(--bs-dark);
+        position: relative;
+
+        &:after {
+            content: "";
+            position: absolute;
+            top: 0;
+            inset-inline-start: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            border: 1px solid var(--bb-light-bg);
+            animation: light-flat 1.2s infinite ease-in-out;
+        }
+    }
+
     &.light-danger {
-        background: var(--bb-light-danger-bg);
+        --bb-light-bg: var(--bb-light-danger-bg);
 
         &.flash {
-            animation: danger var(--bb-light-animation-duration) linear infinite;
+            animation: light-danger var(--bb-light-animation-duration) linear infinite;
         }
 
         &:hover {
-            background: var(--bb-light-danger-hover-bg);
+            --bb-light-bg: var(--bb-light-danger-hover-bg);
         }
     }
 
     &.light-success {
-        background: var(--bb-light-success-bg);
+        --bb-light-bg: var(--bb-light-success-bg);
 
         &.flash {
-            animation: success var(--bb-light-animation-duration) linear infinite;
+            animation: light-success var(--bb-light-animation-duration) linear infinite;
         }
 
         &:hover {
-            background: var(--bb-light-success-hover-bg);
+            --bb-light-bg: var(--bb-light-success-hover-bg);
         }
     }
 
     &.light-info {
-        background: var(--bb-light-info-bg);
+        --bb-light-bg: var(--bb-light-info-bg);
 
         &.flash {
-            animation: info var(--bb-light-animation-duration) linear infinite;
+            animation: light-info var(--bb-light-animation-duration) linear infinite;
         }
 
         &:hover {
-            background: var(--bb-light-info-hover-bg);
+            --bb-light-bg: var(--bb-light-info-hover-bg);
         }
     }
 
     &.light-warning {
-        background: var(--bb-light-warning-bg);
+        --bb-light-bg: var(--bb-light-warning-bg);
 
         &.flash {
-            animation: warning var(--bb-light-animation-duration) linear infinite;
+            animation: light-warning var(--bb-light-animation-duration) linear infinite;
         }
 
         &:hover {
-            background: var(--bb-light-warning-hover-bg);
+            --bb-light-bg: var(--bb-light-warning-hover-bg);
         }
     }
 
     &.light-primary {
-        background: var(--bb-light-primary-bg);
+        --bb-light-bg: var(--bb-light-primary-bg);
 
         &.flash {
-            animation: primary var(--bb-light-animation-duration) linear infinite;
+            animation: light-primary var(--bb-light-animation-duration) linear infinite;
         }
 
         &:hover {
-            background: var(--bb-light-primary-hover-bg);
+            --bb-light-bg: var(--bb-light-primary-hover-bg);
         }
     }
 
     &.light-secondary {
-        background: var(--bb-light-secondary-bg);
+        --bb-light-bg: var(--bb-light-secondary-bg);
 
         &.flash {
-            animation: secondary var(--bb-light-animation-duration) linear infinite;
+            animation: light-secondary var(--bb-light-animation-duration) linear infinite;
         }
 
         &:hover {
-            background: var(--bb-light-secondary-hover-bg)
+            --bb-light-bg: var(--bb-light-secondary-hover-bg)
         }
     }
 
     &.light-dark {
-        background: var(--bb-light-dark-bg);
+        --bb-light-bg: var(--bb-light-dark-bg);
 
         &.flash {
-            animation: dark var(--bb-light-animation-duration) linear infinite;
+            animation: light-dark var(--bb-light-animation-duration) linear infinite;
         }
 
         &:hover {
-            background: var(--bb-light-dark-hover-bg);
+            --bb-light-bg: var(--bb-light-dark-hover-bg);
         }
     }
 }
@@ -151,10 +181,22 @@
     }
 }
 
-@include animation(danger, #e17777, #892726);
-@include animation(success, #5cb85c, #116811);
-@include animation(info, #5bc0de, #1d7792);
-@include animation(warning, #ffc107, #cc9f18);
-@include animation(primary, #007bff, #0f5fb5);
-@include animation(secondary, #6c757d, #4b5054);
-@include animation(dark, #6061e2, #3232a0);
+@keyframes light-flat {
+    0% {
+        transform: scale(.8);
+        opacity: .5;
+    }
+
+    100% {
+        transform: scale(2.4);
+        opacity: 0;
+    }
+}
+
+@include animation(light-danger, #e17777, #892726);
+@include animation(light-success, #5cb85c, #116811);
+@include animation(light-info, #5bc0de, #1d7792);
+@include animation(light-light-warning, #ffc107, #cc9f18);
+@include animation(light-primary, #007bff, #0f5fb5);
+@include animation(light-secondary, #6c757d, #4b5054);
+@include animation(light-dark, #6061e2, #3232a0);

test/UnitTest/Components/LightTest.cs

@@ -10,8 +10,14 @@ public class LightTest : BootstrapBlazorTestBase
     public void IsFlash_Ok()
     {
         var cut = Context.RenderComponent<Light>(builder => builder.Add(s => s.IsFlash, true));
-
         Assert.Contains("flash", cut.Markup);
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.IsFlat, true);
+        });
+        Assert.DoesNotContain("flash", cut.Markup);
+        Assert.Contains("is-flat", cut.Markup);
     }
 
     [Fact]