diff --git a/src/BootstrapBlazor.Server/Components/Samples/Lights.razor b/src/BootstrapBlazor.Server/Components/Samples/Lights.razor index c6ecee7e3..3f2f2733b 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Lights.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Lights.razor @@ -55,7 +55,6 @@ - @@ -80,4 +79,76 @@ + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + diff --git a/src/BootstrapBlazor.Server/Components/Samples/Lights.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Lights.razor.css new file mode 100644 index 000000000..8a1512ccc --- /dev/null +++ b/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; + } diff --git a/src/BootstrapBlazor/Components/Light/Light.razor.cs b/src/BootstrapBlazor/Components/Light/Light.razor.cs index 9d38c4cc0..45b9ebf0e 100644 --- a/src/BootstrapBlazor/Components/Light/Light.razor.cs +++ b/src/BootstrapBlazor/Components/Light/Light.razor.cs @@ -13,7 +13,8 @@ public partial class Light /// 获得 组件样式 /// 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; } + /// + /// 获得/设置 是否为平面图形 默认 false + /// + [Parameter] + public bool IsFlat { get; set; } + /// /// 获得/设置 指示灯颜色 默认为 Success 绿色 /// diff --git a/src/BootstrapBlazor/Components/Light/Light.razor.scss b/src/BootstrapBlazor/Components/Light/Light.razor.scss index 3869416ab..f5f8d89eb 100644 --- a/src/BootstrapBlazor/Components/Light/Light.razor.scss +++ b/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); diff --git a/test/UnitTest/Components/LightTest.cs b/test/UnitTest/Components/LightTest.cs index 0c4db4331..fe0f18a85 100644 --- a/test/UnitTest/Components/LightTest.cs +++ b/test/UnitTest/Components/LightTest.cs @@ -10,8 +10,14 @@ public class LightTest : BootstrapBlazorTestBase public void IsFlash_Ok() { var cut = Context.RenderComponent(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]