
Radio 单选框
在一组备选项中进行单选
基础用法
由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器
Demo
禁用单选框
通过 IsDisabled="true"
单选框不可用状态
Demo
Label 文字
单选框显示文字
Demo
双向绑定数据
绑定组件内变量,数据自动同步,绑定数据类型为 SelectedItem 类型数组
Demo
Text: Value:
Attributes 属性
Loading...
事件 Events
Loading...
@page "/radios"
<h3>Radio 单选框</h3>
<h4>在一组备选项中进行单选</h4>
<Block Title="基础用法" Introduction="由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器" CodeFile="radio.1.html">
<div class="form-inline">
<div class="row">
<div class="form-group col-4">
<Radio Items="@DemoValues" OnStateChanged="@OnStateChanged"></Radio>
</div>
</div>
</div>
<Logger @ref="Trace" class="mt-3" />
</Block>
<Block Title="禁用单选框" Introduction='通过 <code>IsDisabled="true"</code> 单选框不可用状态' CodeFile="radio.2.html">
<div class="form-inline">
<div class="row">
<div class="form-group col-4">
<Radio State="CheckboxState.Checked" DisplayText="选中" IsDisabled="true"></Radio>
</div>
<div class="form-group col-4">
<Radio State="CheckboxState.UnChecked" DisplayText="未选中" IsDisabled="true"></Radio>
</div>
</div>
</div>
</Block>
<Block Title="Label 文字" Introduction="单选框显示文字" CodeFile="radio.3.html">
<div class="form-inline">
<div class="row">
<div class="form-group col-12">
<Radio DisplayText="显示文字"></Radio>
</div>
</div>
</div>
</Block>
<Block Title="双向绑定数据" Introduction="绑定组件内变量,数据自动同步,绑定数据类型为 SelectedItem 类型数组" CodeFile="radio.4.html">
<div class="form-inline">
<div class="row">
<div class="form-group col-12">
<Radio Items="@Items" @bind-Value="@BindRadioItem" OnStateChanged="@OnItemChanged"></Radio>
</div>
<div class="form-group col-12">
<div>Text: @BindRadioItem.Text Value: @BindRadioItem.Value</div>
</div>
</div>
</div>
<Logger @ref="BinderLog" class="mt-3" />
</Block>
<AttributeTable Items="@GetAttributes()" />
<EventTable Items="@GetEvents()" />
// 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 BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using System.Collections.Generic;
using System.Threading.Tasks;
namespace BootstrapBlazor.Shared.Pages
{
/// <summary>
///
/// </summary>
public sealed partial class Radios
{
/// <summary>
///
/// </summary>
private Logger? Trace { get; set; }
/// <summary>
///
/// </summary>
private Logger? BinderLog { get; set; }
private IEnumerable<SelectedItem> DemoValues { get; set; } = new List<SelectedItem>(2)
{
new SelectedItem("1", "选项一"),
new SelectedItem("2", "选项二")
};
/// <summary>
///
/// </summary>
/// <param name="state"></param>
/// <param name="value"></param>
private Task OnStateChanged(CheckboxState state, SelectedItem value)
{
Trace?.Log($"组件选中值: {value.Value} 显示值: {value.Text}");
return Task.CompletedTask;
}
/// <summary>
///
/// </summary>
/// <param name="state"></param>
/// <param name="value"></param>
private Task OnItemChanged(CheckboxState state, SelectedItem value)
{
BinderLog?.Log($"Selected Value: {value.Text}");
return Task.CompletedTask;
}
/// <summary>
///
/// </summary>
private string? BindValue { get; set; }
/// <summary>
///
/// </summary>
private IEnumerable<SelectedItem> Items { get; set; } = new SelectedItem[]
{
new SelectedItem("1", "北京") { Active = true },
new SelectedItem("2", "上海")
};
private SelectedItem BindRadioItem { get; set; } = new SelectedItem();
/// <summary>
///
/// </summary>
/// <returns></returns>
private IEnumerable<AttributeItem> GetAttributes()
{
return new AttributeItem[]
{
new AttributeItem() {
Name = "DisplayText",
Description = "显示文字",
Type = "string",
ValueList = " — ",
DefaultValue = "—"
},
new AttributeItem() {
Name = "IsDisabled",
Description = "是否禁用",
Type = "boolean",
ValueList = "true / false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "Items",
Description = "绑定数据源",
Type = "IEnumerable<TItem>",
ValueList = " — ",
DefaultValue = "—"
},
new AttributeItem() {
Name = "State",
Description = "控件类型",
Type = "CheckboxState",
ValueList = " Checked / UnChecked",
DefaultValue = "text"
},
};
}
/// <summary>
/// 获得事件方法
/// </summary>
/// <returns></returns>
private IEnumerable<EventItem> GetEvents() => new EventItem[]
{
new EventItem()
{
Name = "OnStateChanged",
Description="选择框状态改变时回调此方法",
Type ="Func<CheckboxState, TItem, Task>"
}
};
}
}