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

feat: Checkbox 组件支持 bool 类型双向绑定时自动翻转值

Browse Source
This commit is contained in:
Argo-PD 2020-03-28 14:06:11 +08:00
parent 72fc63b8d5
commit 71d0c21487
3 changed files with 127 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/BootstrapBlazor.WebConsole/Pages/Checkboxs.razor
View File

@ -6,11 +6,11 @@
<div class="row">
<div class="form-group col-4">
<label class="control-label">混合</label>
<Checkbox TItem="string" State="CheckboxState.Mixed" OnStateChanged="@OnStateChanged" Id="Test" data-val="1"></Checkbox>
<Checkbox TItem="string" State="CheckboxState.Mixed" OnStateChanged="@OnStateChanged"></Checkbox>
</div>
<div class="form-group col-4">
<label class="control-label">选中</label>
<Checkbox TItem="string" State="CheckboxState.Checked" OnStateChanged="@OnStateChanged" id="Test" class="test"></Checkbox>
<Checkbox TItem="string" State="CheckboxState.Checked" OnStateChanged="@OnStateChanged"></Checkbox>
</div>
<div class="form-group col-4">
<label class="control-label">未选</label>
@ -29,19 +29,65 @@
</CodeTemplate>
</Block>
<Block Title="双向绑定数据" Introduction="绑定组件内变量，数据自动同步">
<Block Title="禁用复选框" Introduction="复选框不可用状态">
<CardBodyTemplate>
<div class="form-inline">
<div class="row">
<div class="form-group col-4">
<label class="control-label">混合</label>
<Checkbox TItem="string" State="CheckboxState.Mixed" IsDisabled="true"></Checkbox>
</div>
<div class="form-group col-4">
<label class="control-label">选中</label>
<Checkbox TItem="string" State="CheckboxState.Checked" IsDisabled="true"></Checkbox>
</div>
<div class="form-group col-4">
<label class="control-label">未选</label>
<Checkbox TItem="string" State="CheckboxState.UnChecked" IsDisabled="true"></Checkbox>
</div>
</div>
</div>
</CardBodyTemplate>
<CodeTemplate>
<pre>
&lt;Checkbox TItem="string" IsDisabled="true" State="CheckboxState.Mixed"&gt;&lt;/Checkbox&gt;
&lt;Checkbox TItem="string" IsDisabled="true" State="CheckboxState.Checked"&gt;&lt;/Checkbox&gt;
&lt;Checkbox TItem="string" IsDisabled="true" State="CheckboxState.UnChecked"&gt;&lt;/Checkbox&gt;
</pre>
</CodeTemplate>
</Block>
<Block Title="Label 文字" Introduction="复选框显示文字">
<CardBodyTemplate>
<div class="form-inline">
<div class="row">
<div class="form-group col-12">
<label class="control-label">单向绑定</label>
<Checkbox TItem="string" @bind-Value="@BindValue"></Checkbox>
<Checkbox TItem="string" DisplayText="显示文字"></Checkbox>
</div>
</div>
</div>
</CardBodyTemplate>
<CodeTemplate>
<pre>
&lt;Checkbox TItem="string" DisplayText="显示文字"&gt;&lt;/Checkbox&gt;
</pre>
</CodeTemplate>
</Block>
<Block Title="双向绑定数据" Introduction="绑定组件内变量，数据自动同步，绑定数据类型为 boolean 类型时自动翻转值">
<CardBodyTemplate>
<div class="form-inline">
<div class="row">
<div class="form-group col-12">
<Checkbox TItem="bool" DisplayText="双向绑定" @bind-Value="@BindValue" OnStateChanged="@OnItemChanged"></Checkbox>
</div>
<div class="form-group col-12">
<div>绑定数值: @BindValue</div>
<BootstrapInput TItem="bool" @bind-Value="@BindValue" disabled></BootstrapInput>
</div>
</div>
</div>
<Logger @ref="BinderLog" class="mt-3" />
</CardBodyTemplate>
<CodeTemplate>
<pre>
@ -51,29 +97,3 @@
</Block>
<AttributeTable Items="@GetAttributes()" />
@code {
protected Logger? Trace { get; set; }
protected void OnStateChanged(CheckboxState state, string value)
{
Trace?.Log($"Checkbox state changed State: {state}");
}
protected string BindValue { get; set; } = "绑定值";
protected IEnumerable<AttributeItem> GetAttributes()
{
return new AttributeItem[]
{
new AttributeItem()
{
Name = "State",
Description = "控件类型",
Type = "CheckboxState",
ValueList = "Mixed / Checked / UnChecked",
DefaultValue = "text"
}
};
}
}

66
src/BootstrapBlazor.WebConsole/Pages/Checkboxs.razor.cs Normal file
View File

@ -0,0 +1,66 @@
using BootstrapBlazor.Components;
using BootstrapBlazor.WebConsole.Common;
using BootstrapBlazor.WebConsole.Pages.Components;
using System.Collections.Generic;
namespace BootstrapBlazor.WebConsole.Pages
{
/// <summary>
///
/// </summary>
public partial class Checkboxs
{
/// <summary>
///
/// </summary>
protected Logger? Trace { get; set; }
/// <summary>
///
/// </summary>
protected Logger? BinderLog { get; set; }
/// <summary>
///
/// </summary>
/// <param name="state"></param>
/// <param name="value"></param>
protected void OnStateChanged(CheckboxState state, string value)
{
Trace?.Log($"Checkbox state changed State: {state}");
}
/// <summary>
///
/// </summary>
/// <param name="state"></param>
/// <param name="value"></param>
protected void OnItemChanged(CheckboxState state, bool value)
{
BinderLog?.Log($"CheckboxState: {state} - Bind Value: {value}");
}
/// <summary>
///
/// </summary>
protected bool BindValue { get; set; }
/// <summary>
///
/// </summary>
/// <returns></returns>
protected IEnumerable<AttributeItem> GetAttributes()
{
return new AttributeItem[]
{
new AttributeItem()
{
Name = "State",
Description = "控件类型",
Type = "CheckboxState",
ValueList = "Mixed / Checked / UnChecked",
DefaultValue = "text"
}
};
}
}
}

6
src/BootstrapBlazor/Components/Checkbox/CheckboxBase.cs
View File

@ -61,7 +61,13 @@ namespace BootstrapBlazor.Components
if (!IsDisabled)
{
State = State == CheckboxState.Checked ? CheckboxState.UnChecked : CheckboxState.Checked;
if (typeof(TItem) == typeof(bool))
{
var v = (bool?)Convert.ChangeType(Value, TypeCode.Boolean) ?? State != CheckboxState.Checked;
Value = (TItem)(object)(!v);
if (ValueChanged.HasDelegate) ValueChanged.InvokeAsync(Value);
}
OnStateChanged?.Invoke(State, Value);
}
}