mirror of
https://gitee.com/LongbowEnterprise/BootstrapBlazor.git
synced 2024-12-05 05:29:47 +08:00
feat: Checkbox 组件支持 bool 类型双向绑定时自动翻转值
This commit is contained in:
parent
72fc63b8d5
commit
71d0c21487
@ -6,11 +6,11 @@
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="form-group col-4">
|
<div class="form-group col-4">
|
||||||
<label class="control-label">混合</label>
|
<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>
|
||||||
<div class="form-group col-4">
|
<div class="form-group col-4">
|
||||||
<label class="control-label">选中</label>
|
<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>
|
||||||
<div class="form-group col-4">
|
<div class="form-group col-4">
|
||||||
<label class="control-label">未选</label>
|
<label class="control-label">未选</label>
|
||||||
@ -29,19 +29,65 @@
|
|||||||
</CodeTemplate>
|
</CodeTemplate>
|
||||||
</Block>
|
</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>
|
||||||
|
<Checkbox TItem="string" IsDisabled="true" State="CheckboxState.Mixed"></Checkbox>
|
||||||
|
<Checkbox TItem="string" IsDisabled="true" State="CheckboxState.Checked"></Checkbox>
|
||||||
|
<Checkbox TItem="string" IsDisabled="true" State="CheckboxState.UnChecked"></Checkbox>
|
||||||
|
</pre>
|
||||||
|
</CodeTemplate>
|
||||||
|
</Block>
|
||||||
|
|
||||||
|
<Block Title="Label 文字" Introduction="复选框显示文字">
|
||||||
<CardBodyTemplate>
|
<CardBodyTemplate>
|
||||||
<div class="form-inline">
|
<div class="form-inline">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="form-group col-12">
|
<div class="form-group col-12">
|
||||||
<label class="control-label">单向绑定</label>
|
<Checkbox TItem="string" DisplayText="显示文字"></Checkbox>
|
||||||
<Checkbox TItem="string" @bind-Value="@BindValue"></Checkbox>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardBodyTemplate>
|
||||||
|
<CodeTemplate>
|
||||||
|
<pre>
|
||||||
|
<Checkbox TItem="string" DisplayText="显示文字"></Checkbox>
|
||||||
|
</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>
|
||||||
<div class="form-group col-12">
|
<div class="form-group col-12">
|
||||||
<div>绑定数值: @BindValue</div>
|
<BootstrapInput TItem="bool" @bind-Value="@BindValue" disabled></BootstrapInput>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<Logger @ref="BinderLog" class="mt-3" />
|
||||||
</CardBodyTemplate>
|
</CardBodyTemplate>
|
||||||
<CodeTemplate>
|
<CodeTemplate>
|
||||||
<pre>
|
<pre>
|
||||||
@ -51,29 +97,3 @@
|
|||||||
</Block>
|
</Block>
|
||||||
|
|
||||||
<AttributeTable Items="@GetAttributes()" />
|
<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
66
src/BootstrapBlazor.WebConsole/Pages/Checkboxs.razor.cs
Normal 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"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -61,7 +61,13 @@ namespace BootstrapBlazor.Components
|
|||||||
if (!IsDisabled)
|
if (!IsDisabled)
|
||||||
{
|
{
|
||||||
State = State == CheckboxState.Checked ? CheckboxState.UnChecked : CheckboxState.Checked;
|
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);
|
if (ValueChanged.HasDelegate) ValueChanged.InvokeAsync(Value);
|
||||||
|
}
|
||||||
OnStateChanged?.Invoke(State, Value);
|
OnStateChanged?.Invoke(State, Value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user