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 @@
-
+
-<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>
+
-
-
@@ -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>
-
+
-
-<Switch OnColor="Color.Primary" IsDisabled="true" OnText="开启" OffText="关闭" >primary</Switch>
-
-
+<Switch OnColor="Color.Primary" IsDisabled="true" OnText="开启" OffText="关闭">primary</Switch>
+
-
+
-<Switch OnColor="Color.Danger" OffColor="Color.Success" OnText="开启" OffText="关闭" >开关颜色</Switch>
+<Switch Value="true" OnColor="Color.Primary">primary</Switch>
+
+
+
-
+
+
+
+
+
+
+<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