test/BootstrapBlazor3
1
0
Fork 0
mirror of https://gitee.com/LongbowEnterprise/BootstrapBlazor.git synced 2024-12-02 03:59:14 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

!1161 fix(#I3C205): move switch click handler to span element

Browse Source 
* fix: 移动 onclick 事件到 span 元素上
* refactor: 移除自定义显示文本
* style: 微调小屏幕下 Table 组件的值列高度问题
* style: 微调 switch 组件在表单内的高度
* refactor: 移除 SwitchBase 基类
This commit is contained in:
Argo 2021-03-18 19:24:23 +08:00
parent f08b573e8f
commit 98d00a409e
9 changed files with 105 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesEdit.razor
View File

@ -18,7 +18,7 @@
<TableColumn @bind-Field="@context.Count" />
<TableColumn @bind-Field="@context.Complete">
<Template Context="v">
<Switch IsDisabled="true" Value="v.Value" ShowInnerText="true" OnInnerText="是" OffInnerText="否" />
<Switch IsDisabled="true" Value="v.Value" ShowInnerText="true" />
</Template>
</TableColumn>
</TableColumns>
@ -45,7 +45,7 @@
<BootstrapInput @bind-Value="@context.Count" />
</div>
<div class="form-group col-12 col-sm-6">
<Switch @bind-Value="@context.Complete" ShowInnerText="true" OnInnerText="是" OffInnerText="否" />
<Switch @bind-Value="@context.Complete" ShowInnerText="true" />
</div>
</div>
</div>

6
src/BootstrapBlazor/Components/Switch/Switch.razor
View File

@ -1,12 +1,12 @@
@namespace BootstrapBlazor.Components
@inherits SwitchBase
@inherits ToggleBase
@if (IsShowLabel)
{
<label class="control-label">@DisplayText</label>
}
<div @attributes="@AdditionalAttributes" class="@ClassName" style="@SwitchStyleName" @onclick="@OnClick">
<span class="@CoreClassName" data-inner-text="@GetInnerText()" style="@StyleName" />
<div @attributes="@AdditionalAttributes" class="@ClassName" style="@SwitchStyleName">
<span class="@CoreClassName" data-inner-text="@GetInnerText()" style="@StyleName" @onclick="@OnClick" />
@if (!string.IsNullOrEmpty(Text))
{
<span class="switch-label">

89
src/BootstrapBlazor/Components/Switch/Switch.razor.cs
View File

@ -11,8 +11,95 @@ namespace BootstrapBlazor.Components
/// <summary>
///
/// </summary>
public sealed partial class Switch
public partial class Switch
{
/// <summary>
/// 获得 样式集合
/// </summary>
protected override string? ClassName => CssBuilder.Default("switch")
.AddClass("is-checked", Value)
.AddClass("is-disabled", IsDisabled)
.AddClassFromAttributes(AdditionalAttributes)
.Build();
private 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();
private string? GetInnerText()
{
string? ret = null;
if (ShowInnerText) ret = Value ? OnInnerText : OffInnerText;
return ret;
}
/// <summary>
/// 获得 显示文字
/// </summary>
private string? Text => Value ? OnText : OffText;
/// <summary>
/// 获得 组件最小宽度
/// </summary>
private string? SwitchStyleName => CssBuilder.Default()
.AddClass($"min-width: {Width}px", Width > 0)
.Build();
/// <summary>
/// 获得 Style 集合
/// </summary>
protected override string? StyleName => CssBuilder.Default()
.AddClass($"width: {Width}px;", Width > 0)
.AddClass($"height: {Height}px;", Height >= 20)
.Build();
/// <summary>
/// 获得/设置 开颜色
/// </summary>
[Parameter]
public Color OnColor { get; set; } = Color.Success;
/// <summary>
/// 获得/设置 关颜色
/// </summary>
[Parameter]
public Color OffColor { get; set; }
/// <summary>
/// 获得/设置 组件宽度 默认 40
/// </summary>
[Parameter]
public override int Width { get; set; } = 40;
/// <summary>
/// 获得/设置 控件高度默认 20px
/// </summary>
[Parameter]
public int Height { get; set; } = 20;
/// <summary>
/// 获得/设置 组件 On 时内置显示文本
/// </summary>
[Parameter]
[NotNull]
public string? OnInnerText { get; set; }
/// <summary>
/// 获得/设置 组件 Off 时内置显示文本
/// </summary>
[Parameter]
[NotNull]
public string? OffInnerText { get; set; }
/// <summary>
/// 获得/设置 是否显示内置文字 默认 false 显示
/// </summary>
[Parameter]
public bool ShowInnerText { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<Switch>? Localizer { get; set; }

4
src/BootstrapBlazor/Components/Switch/Switch.razor.cs.css
View File

@ -67,6 +67,10 @@
font-size: 80%;
}
.form-inline .switch {
height: 35px;
}
@media (min-width: 576px) {
.form-inline .switch {
width: 196px;

2
src/BootstrapBlazor/Components/Switch/Switch.razor.cs.min.css vendored
View File

@ -1 +1 @@
.switch{display:inline-flex;align-items:center;width:100%}.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}.switch .switch-core:after{content:"";position:absolute;top:1px;left:1px;border-radius:50%;transition:all .3s;width:16px;height:16px;background-color:#fff}.switch .switch-core:before{content:attr(data-inner-text);position:absolute;top:1px;left:calc(100% - 17px);transition:all .3s;font-size:80%;color:#606266}.switch.is-checked .switch-core:after{left:100%;margin-left:-17px}.switch.is-checked .switch-core:before{left:5px;color:#fff}.switch .switch-label{margin-left:10px;cursor:pointer}.switch.is-disabled{opacity:.6}.switch.is-disabled,.switch.switch.is-disabled .switch-core,.switch.switch.is-disabled .switch-label{cursor:not-allowed}.switch .switch-inner-text{font-size:80%}@media(min-width:576px){.form-inline .switch{width:196px}}
.switch{display:inline-flex;align-items:center;width:100%}.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}.switch .switch-core:after{content:"";position:absolute;top:1px;left:1px;border-radius:50%;transition:all .3s;width:16px;height:16px;background-color:#fff}.switch .switch-core:before{content:attr(data-inner-text);position:absolute;top:1px;left:calc(100% - 17px);transition:all .3s;font-size:80%;color:#606266}.switch.is-checked .switch-core:after{left:100%;margin-left:-17px}.switch.is-checked .switch-core:before{left:5px;color:#fff}.switch .switch-label{margin-left:10px;cursor:pointer}.switch.is-disabled{opacity:.6}.switch.is-disabled,.switch.switch.is-disabled .switch-core,.switch.switch.is-disabled .switch-label{cursor:not-allowed}.switch .switch-inner-text{font-size:80%}.form-inline .switch{height:35px}@media(min-width:576px){.form-inline .switch{width:196px}}

109
src/BootstrapBlazor/Components/Switch/SwitchBase.cs
View File

@ -1,109 +0,0 @@
// 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 Microsoft.AspNetCore.Components;
using System.Diagnostics.CodeAnalysis;
namespace BootstrapBlazor.Components
{
/// <summary>
/// Switch 开关组件
/// </summary>
public abstract class SwitchBase : ToggleBase
{
/// <summary>
/// 获得 样式集合
/// </summary>
protected override string? ClassName => CssBuilder.Default("switch")
.AddClass("is-checked", Value)
.AddClass("is-disabled", IsDisabled)
.AddClassFromAttributes(AdditionalAttributes)
.Build();
/// <summary>
/// 获得 开关样式集合
/// </summary>
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();
/// <summary>
///
/// </summary>
protected string? GetInnerText()
{
string? ret = null;
if (ShowInnerText) ret = Value ? OnInnerText : OffInnerText;
return ret;
}
/// <summary>
/// 获得 显示文字
/// </summary>
protected string? Text => Value ? OnText : OffText;
/// <summary>
/// 获得 组件最小宽度
/// </summary>
protected string? SwitchStyleName => CssBuilder.Default()
.AddClass($"min-width: {Width}px", Width > 0)
.Build();
/// <summary>
/// 获得 Style 集合
/// </summary>
protected override string? StyleName => CssBuilder.Default()
.AddClass($"width: {Width}px;", Width > 0)
.AddClass($"height: {Height}px;", Height >= 20)
.Build();
/// <summary>
/// 获得/设置 开颜色
/// </summary>
[Parameter]
public Color OnColor { get; set; } = Color.Success;
/// <summary>
/// 获得/设置 关颜色
/// </summary>
[Parameter]
public Color OffColor { get; set; }
/// <summary>
/// 获得/设置 组件宽度 默认 40
/// </summary>
[Parameter]
public override int Width { get; set; } = 40;
/// <summary>
/// 获得/设置 控件高度默认 20px
/// </summary>
[Parameter]
public int Height { get; set; } = 20;
/// <summary>
/// 获得/设置 组件 On 时内置显示文本
/// </summary>
[Parameter]
[NotNull]
public string? OnInnerText { get; set; }
/// <summary>
/// 获得/设置 组件 Off 时内置显示文本
/// </summary>
[Parameter]
[NotNull]
public string? OffInnerText { get; set; }
/// <summary>
/// 获得/设置 是否显示内置文字
/// </summary>
[Parameter]
public bool ShowInnerText { get; set; }
}
}

4
src/BootstrapBlazor/Components/Table/Table.razor.cs.css
View File

@ -364,6 +364,10 @@
margin-right: 6px;
}
.table-row .table-cell > span {
display: inherit;
}
.table-row.table-footer {
display: flex;
}

2
src/BootstrapBlazor/Components/Table/Table.razor.cs.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.bundle.min.css vendored
View File

File diff suppressed because one or more lines are too long