From e501da9a1278e913e5593ca9ef50731a9e17f63b Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 26 Mar 2020 23:49:59 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=20switch=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #Comment 支持颜色、禁用等效果、增加 ValueChanged 事件、双向绑定 --- .../Pages/Switchs.razor | 76 +++++---- .../Pages/Switchs.razor.cs | 28 +++- .../Pages/Toggles.razor | 4 - .../Pages/Toggles.razor.cs | 11 +- .../Components/Switch/Switch.razor | 16 +- .../Components/Switch/SwitchBase.cs | 112 ++++++------- .../Components/Toggle/ToggleBase.cs | 25 ++- .../wwwroot/css/bootstrap.blazor.css | 154 ++++++------------ 8 files changed, 197 insertions(+), 229 deletions(-) diff --git a/src/BootstrapBlazor.WebConsole/Pages/Switchs.razor b/src/BootstrapBlazor.WebConsole/Pages/Switchs.razor index 96de4ddff..b83b16f68 100644 --- a/src/BootstrapBlazor.WebConsole/Pages/Switchs.razor +++ b/src/BootstrapBlazor.WebConsole/Pages/Switchs.razor @@ -4,35 +4,30 @@
-
primary
-
Secondary
-
Success
-
Danger
-
Warning
-
Info
-
Dark
-
Light
-
Link
+
primary
+
Secondary
+
Success
+
Danger
+
Warning
+
Info
+
Dark
- + 
-<Switch OnColor="Color.Primary"  OnText="开启" OffText="关闭" >Primary</Switch>
-<Switch OnColor="Color.Secondary"  OnText="开启" OffText="关闭" >Secondary</Switch>
-<Switch OnColor="Color.Success"  OnText="开启" OffText="关闭" >Success</Switch>
-<Switch OnColor="Color.Danger"  OnText="开启" OffText="关闭" >Danger</Switch>
-<Switch OnColor="Color.Warning"  OnText="开启" OffText="关闭" >Warning</Switch>
-<Switch OnColor="Color.Info"  OnText="开启" OffText="关闭" >Info</Switch>
-<Switch OnColor="Color.Dark"  OnText="开启" OffText="关闭" >Dark</Switch>
-<Switch OnColor="Color.Light"  OnText="开启" OffText="关闭" >Light</Switch>
-<Switch OnColor="Color.Link"  OnText="开启" OffText="关闭" >Link</Switch>
-
+<Switch Value="true" OnColor="Color.Primary" OnText="开启" OffText="关闭">Primary</Switch> +<Switch Value="true" OnColor="Color.Secondary" OnText="开启" OffText="关闭">Secondary</Switch> +<Switch Value="true" OnColor="Color.Success" OnText="开启" OffText="关闭">Success</Switch> +<Switch Value="true" OnColor="Color.Danger" OnText="开启" OffText="关闭">Danger</Switch> +<Switch Value="true" OnColor="Color.Warning" OnText="开启" OffText="关闭">Warning</Switch> +<Switch Value="true" OnColor="Color.Info" OnText="开启" OffText="关闭">Info</Switch> +<Switch Value="true" OnColor="Color.Dark" OnText="开启" OffText="关闭">Dark</Switch> + -
@@ -45,7 +40,6 @@
Info
- 
@@ -58,40 +52,58 @@
 <Switch OnColor="Color.Dark"  OnText="开启" OffText="关闭" >Dark</Switch>
 <Switch OnColor="Color.Light"  OnText="开启" OffText="关闭" >Light</Switch>
 <Switch OnColor="Color.Link"  OnText="开启" OffText="关闭" >Link</Switch>
-
+ -
-
primary
+
primary
 
-<Switch OnColor="Color.Primary" IsDisabled="true" OnText="开启" OffText="关闭" >primary</Switch>
-
-
+<Switch OnColor="Color.Primary" IsDisabled="true" OnText="开启" OffText="关闭">primary</Switch> + - +
-
开关颜色
+
primary
 
-<Switch OnColor="Color.Danger"  OffColor="Color.Success" OnText="开启" OffText="关闭" >开关颜色</Switch>
+<Switch Value="true" OnColor="Color.Primary">primary</Switch>
+
+ + - + + +
+
+
+ + +
+
+
绑定数值: @BindValue
+
+
+
+ + + 
+<Switch Color="Color.Success" @@bind-Value="@@BindValue"">primary</Switch>
+
diff --git a/src/BootstrapBlazor.WebConsole/Pages/Switchs.razor.cs b/src/BootstrapBlazor.WebConsole/Pages/Switchs.razor.cs index 07d96c66e..3c383d4f4 100644 --- a/src/BootstrapBlazor.WebConsole/Pages/Switchs.razor.cs +++ b/src/BootstrapBlazor.WebConsole/Pages/Switchs.razor.cs @@ -1,13 +1,30 @@ using BootstrapBlazor.WebConsole.Common; +using BootstrapBlazor.WebConsole.Pages.Components; using System.Collections.Generic; namespace BootstrapBlazor.WebConsole.Pages { /// - /// + /// /// public partial class Switchs { + /// + /// + /// + protected bool BindValue { get; set; } + + /// + /// + /// + protected Logger? Trace { get; set; } + + /// + /// + /// + /// + protected void OnValueChanged(bool val) => Trace?.Log($"Switch CurrentValue: {val}"); + /// /// 获得属性方法 /// @@ -30,20 +47,13 @@ namespace BootstrapBlazor.WebConsole.Pages DefaultValue = " — " }, new AttributeItem() { - Name = "ChildContent", - Description = "内容", - Type = "RenderFragment", - ValueList = " — ", - DefaultValue = " — " - }, - new AttributeItem() { Name = "IsDisabled", Description = "是否禁用", Type = "boolean", ValueList = " — ", DefaultValue = "false" }, - new AttributeItem() { + new AttributeItem() { Name = "OnColor OffColor", Description = "开关颜色设置", Type = "Color", diff --git a/src/BootstrapBlazor.WebConsole/Pages/Toggles.razor b/src/BootstrapBlazor.WebConsole/Pages/Toggles.razor index 77d230b97..e0723424f 100644 --- a/src/BootstrapBlazor.WebConsole/Pages/Toggles.razor +++ b/src/BootstrapBlazor.WebConsole/Pages/Toggles.razor @@ -83,7 +83,3 @@ - -@code { - protected bool BindValue { get; set; } -} \ No newline at end of file diff --git a/src/BootstrapBlazor.WebConsole/Pages/Toggles.razor.cs b/src/BootstrapBlazor.WebConsole/Pages/Toggles.razor.cs index c90f35975..9a6999e46 100644 --- a/src/BootstrapBlazor.WebConsole/Pages/Toggles.razor.cs +++ b/src/BootstrapBlazor.WebConsole/Pages/Toggles.razor.cs @@ -5,17 +5,22 @@ using System.Collections.Generic; namespace BootstrapBlazor.WebConsole.Pages { /// - /// + /// /// public partial class Toggles { /// - /// + /// + /// + protected bool BindValue { get; set; } + + /// + /// /// protected Logger? Trace { get; set; } /// - /// + /// /// /// protected void OnValueChanged(bool val) => Trace?.Log($"Toggle CurrentValue: {val}"); diff --git a/src/BootstrapBlazor/Components/Switch/Switch.razor b/src/BootstrapBlazor/Components/Switch/Switch.razor index 40d8cb050..31bf4aa62 100644 --- a/src/BootstrapBlazor/Components/Switch/Switch.razor +++ b/src/BootstrapBlazor/Components/Switch/Switch.razor @@ -1,11 +1,11 @@ @namespace BootstrapBlazor.Components @inherits SwitchBase - - @ChildContent - - - - - - +
+ + + @if(!string.IsNullOrEmpty(Text)) + { + @Text + } +
diff --git a/src/BootstrapBlazor/Components/Switch/SwitchBase.cs b/src/BootstrapBlazor/Components/Switch/SwitchBase.cs index 50852c650..ee492f6b9 100644 --- a/src/BootstrapBlazor/Components/Switch/SwitchBase.cs +++ b/src/BootstrapBlazor/Components/Switch/SwitchBase.cs @@ -1,32 +1,54 @@ using BootstrapBlazor.Utils; using Microsoft.AspNetCore.Components; -using Microsoft.AspNetCore.Components.Web; -using System; -using System.Threading.Tasks; namespace BootstrapBlazor.Components { /// /// Switch 开关组件 /// - public abstract class SwitchBase : BootstrapComponentBase + public abstract class SwitchBase : ToggleBase { /// /// 获得 样式集合 /// - /// protected override string? ClassName => CssBuilder.Default("switch") - .AddClass($"on-{OnColor.ToDescriptionString()}", OnColor != Color.None) - .AddClass($"off-{OffColor.ToDescriptionString()}", OffColor != Color.None) - .AddClass($"btn-{Size.ToDescriptionString()}", Size != Size.None) //设置大小生效，但是字体有问题 - .AddClass("custom-control custom-switch") + .AddClass("is-checked", Value) + .AddClass("is-disabled", IsDisabled) .AddClass(Class) - .Build(); + .Build(); + + /// + /// 获得 开关样式集合 + /// + protected string? CoreClassName => CssBuilder.Default("switch-core") + .AddClass($"border-{OnColor.ToDescriptionString()}", OnColor != Color.None && Value) + .AddClass($"bg-{OnColor.ToDescriptionString()}", OnColor != Color.None && Value) + .AddClass($"border-{OffColor.ToDescriptionString()}", OffColor != Color.None && !Value) + .AddClass($"bg-{OffColor.ToDescriptionString()}", OffColor != Color.None && !Value) + .Build(); + + /// + /// 获得 显示文字 + /// + protected string? Text => Value ? OnText : OffText; + + /// + /// 获得 开关 disabled 属性 + /// + protected string? Disabled => IsDisabled ? "true" : null; + + /// + /// 获得 Style 集合 + /// + protected override string? StyleName => CssBuilder.Default() + .AddClass($"width: {Width}px;", Width > 0) + .AddClass($"height: {Height}px;", Height >= 20) + .Build(); /// /// 获得/设置 开颜色 /// - [Parameter] public Color OnColor { get; set; } = Color.Info; + [Parameter] public Color OnColor { get; set; } = Color.Success; /// /// 获得/设置 关颜色 @@ -38,75 +60,45 @@ namespace BootstrapBlazor.Components /// [Parameter] public Size Size { get; set; } - /// - /// 获得/设置 是否禁用 - /// - [Parameter] - public bool IsDisabled { get; set; } - /// /// 获得/设置 样式名称 /// [Parameter] public string? Class { get; set; } + /// + /// 获得/设置 组件宽度 默认 40 + /// + [Parameter] + public override int Width { get; set; } = 40; + + /// + /// 获得/设置 控件高度默认 20px + /// + [Parameter] public int Height { get; set; } = 20; + /// /// 获得/设置 组件 On 时显示文本 /// [Parameter] - public string OnText { get; set; } = "展开"; + public override string? OnText { get; set; } /// /// 获得/设置 组件 Off 时显示文本 /// [Parameter] - public string OffText { get; set; } = "收缩"; + public override string? OffText { get; set; } /// - /// 获得/设置 组件是否处于 On 状态 默认为 Off 状态 + /// 点击控件时触发此方法 /// - [Parameter] - public bool Value { get; set; } = true; - - /// - /// 获得 开关 disabled 属性 - /// - protected string? Disabled => IsDisabled ? "true" : null; - - /// - /// 获得/设置 Value 值改变时回调事件 - /// - [Parameter] - public EventCallback ValueChanged { get; set; } - - /// - /// 转换开关事件 - /// - protected EventCallback SwitchClick { get; set; } - - /// - /// 获得 当前组件 Id - /// - [Parameter] public override string? Id { get; set; } = Guid.NewGuid().ToString(); - - /// - /// OnInitializedAsync 方法 - /// - protected override Task OnInitializedAsync() + protected override void OnClick() { - if (!SwitchClick.HasDelegate) + if (!IsDisabled) { - SwitchClick = EventCallback.Factory.Create(this, () => - { - Value = !Value; - ValueChanged.InvokeAsync(Value); - }); + Value = !Value; + if (ValueChanged.HasDelegate) ValueChanged.InvokeAsync(Value); + OnValueChanged?.Invoke(Value); } - return Task.CompletedTask; } - - /// - /// 子组件 - /// - [Parameter] public RenderFragment? ChildContent { get; set; } } } diff --git a/src/BootstrapBlazor/Components/Toggle/ToggleBase.cs b/src/BootstrapBlazor/Components/Toggle/ToggleBase.cs index 3a4b691fb..053c988a5 100644 --- a/src/BootstrapBlazor/Components/Toggle/ToggleBase.cs +++ b/src/BootstrapBlazor/Components/Toggle/ToggleBase.cs @@ -1,6 +1,5 @@ using BootstrapBlazor.Utils; using Microsoft.AspNetCore.Components; -using Microsoft.AspNetCore.Components.Web; using System; namespace BootstrapBlazor.Components @@ -22,38 +21,38 @@ namespace BootstrapBlazor.Components /// /// 获得 Style 集合 /// - protected string? StyleName => CssBuilder.Default() + protected virtual string? StyleName => CssBuilder.Default() .AddClass($"width: {Width}px;", Width > 0) .Build(); /// - /// 获得/设置 组件高度 + /// 获得/设置 组件宽度 /// [Parameter] - public int Width { get; set; } = 120; - - /// - /// 获得/设置 组件 On 时显示文本 - /// - [Parameter] - public string OnText { get; set; } = "展开"; + public virtual int Width { get; set; } = 120; /// /// 获得/设置 是否禁用 /// [Parameter] public bool IsDisabled { get; set; } + /// + /// 获得/设置 组件 On 时显示文本 + /// + [Parameter] + public virtual string? OnText { get; set; } = "展开"; + /// /// 获得/设置 组件 Off 时显示文本 /// [Parameter] - public string OffText { get; set; } = "收缩"; + public virtual string? OffText { get; set; } = "收缩"; /// /// 获得/设置 组件是否处于 On 状态 默认为 Off 状态 /// [Parameter] - public bool Value { get; set; } = false; + public bool Value { get; set; } /// /// Gets or sets a callback that updates the bound value. @@ -69,7 +68,7 @@ namespace BootstrapBlazor.Components /// /// 点击控件时触发此方法 /// - protected void OnClick() + protected virtual void OnClick() { if (!IsDisabled) { diff --git a/src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.css b/src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.css index 21bf5268e..81fed0399 100644 --- a/src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.css +++ b/src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.css @@ -327,112 +327,66 @@ a { } /*end toggle*/ -/*start Switch*/ -.on-primary .custom-control-input:checked ~ .custom-control-label::before { - color: #fff; - border-color: #007bff; - background-color: #007bff; +/*switch*/ +.switch { + display: inline-flex; + align-items: center; + position: relative; + font-size: 0.875rem; + line-height: 20px; + height: 20px; + vertical-align: middle; } -.off-primary .custom-control-input:not(:checked) ~ .custom-control-label::before { - color: #fff; - border-color: #007bff; - background-color: #007bff; -} + .switch .switch-input { + position: absolute; + width: 0; + height: 0; + opacity: 0; + margin: 0; + } -.on-secondary .custom-control-input:checked ~ .custom-control-label::before { - color: #fff; - border-color: #6c757d; - background-color: #6c757d; -} + .switch .switch-core { + margin: 0; + display: inline-block; + position: relative; + border: 1px solid #dcdfe6; + outline: none; + border-radius: 10px; + box-sizing: border-box; + background: #dcdfe6; + cursor: pointer; + transition: border-color .3s,background-color .3s; + vertical-align: middle; + } -.off-secondary .custom-control-input:not(:checked) ~ .custom-control-label::before { - color: #fff; - border-color: #6c757d; - background-color: #6c757d; -} + .switch .switch-core:after { + content: ""; + position: absolute; + top: 1px; + left: 1px; + border-radius: 100%; + transition: all .3s; + width: 16px; + height: 16px; + background-color: #fff; + } -.on-success .custom-control-input:checked ~ .custom-control-label::before { - color: #fff; - border-color: #28a745; - background-color: #28a745; -} + .switch.is-checked .switch-core:after { + left: 100%; + margin-left: -17px; + } -.off-success .custom-control-input:not(:checked) ~ .custom-control-label::before { - color: #fff; - border-color: #28a745; - background-color: #28a745; -} + .switch .switch-label { + margin-left: 10px; + cursor: pointer; + } -.on-danger .custom-control-input:checked ~ .custom-control-label::before { - color: #fff; - border-color: #dc3545; - background-color: #dc3545; -} + .switch.is-disabled { + opacity: 0.6; + } -.off-danger .custom-control-input:not(:checked) ~ .custom-control-label::before { - color: #fff; - border-color: #dc3545; - background-color: #dc3545; -} - -.on-warning .custom-control-input:checked ~ .custom-control-label::before { - color: #fff; - border-color: #ffc107; - background-color: #ffc107; -} - -.off-warning .custom-control-input:not(:checked) ~ .custom-control-label::before { - color: #fff; - border-color: #ffc107; - background-color: #ffc107; -} - -.on-info .custom-control-input:checked ~ .custom-control-label::before { - color: #fff; - border-color: #17a2b8; - background-color: #17a2b8; -} - -.off-info .custom-control-input:not(:checked) ~ .custom-control-label::before { - color: #fff; - border-color: #17a2b8; - background-color: #17a2b8; -} - -.on-dark .custom-control-input:checked ~ .custom-control-label::before { - color: #fff; - border-color: #343a40; - background-color: #343a40; -} - -.off-dark .custom-control-input:not(:checked) ~ .custom-control-label::before { - color: #fff; - border-color: #343a40; - background-color: #343a40; -} - -.on-light .custom-control-input:checked ~ .custom-control-label::before { - color: #fff; - border-color: #f8f9fa; - background-color: #f8f9fa; -} - -.off-light .custom-control-input:not(:checked) ~ .custom-control-label::before { - color: #fff; - border-color: #f8f9fa; - background-color: #f8f9fa; -} - -.on-link .custom-control-input:checked ~ .custom-control-label::before { - color: #fff; - border-color: #007bff; - background-color: #007bff; -} - -.off-link .custom-control-input:not(:checked) ~ .custom-control-label::before { - color: #fff; - border-color: #007bff; - background-color: #007bff; -} + .switch.is-disabled, .switch.switch.is-disabled .switch-core, .switch.switch.is-disabled .switch-label { + cursor: not-allowed; + } /*end switch*/ \ No newline at end of file