Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Radio 单选框

在一组备选项中进行单选

由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器

Demo

通过 IsDisabled="true" 单选框不可用状态

Demo

单选框显示文字

Demo

绑定组件内变量,数据自动同步,绑定数据类型为 SelectedItem 类型数组

Demo
Text: 北京 Value: 1

通过设置 IsVertical 使组件内部竖向排列

Demo

通过双向绑定 Value 无需设置 Items

Demo

通过设置 IsAutoAddNullItem 自动添加 空值 选项,通过设置 NullItemText 自定义 空值 选项

通过设置 Color 属性改变组件背景色

Demo

Attributes

Loading...

Event

Loading...
@page "/radios"

<h3>Radio 单选框</h3>

<h4>在一组备选项中进行单选</h4>

<Block Title="基础用法" Introduction="由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器">
    <RadioList TValue="string" Items="@DemoValues" OnSelectedChanged="@OnSelectedChanged"></RadioList>
    <BlockLogger @ref="Trace" class="mt-3" />
</Block>

<Block Title="禁用单选框" Introduction='通过 <code>IsDisabled="true"</code> 单选框不可用状态'>
    <RadioList TValue="string" Items="@DemoValues" IsDisabled="true" ShowBorder="false"></RadioList>
</Block>

<Block Title="Label 文字" Introduction="单选框显示文字">
    <RadioList TValue="string" Items="@DemoValues" ShowLabel="true" DisplayText="按钮组"></RadioList>
</Block>

<Block Title="双向绑定数据" Introduction="绑定组件内变量,数据自动同步,绑定数据类型为 SelectedItem 类型数组">
    <div class="row g-3">
        <div class="col-12">
            <RadioList Items="@Items" @bind-Value="@BindRadioItem" OnSelectedChanged="@OnItemChanged"></RadioList>
        </div>
        <div class="col-12">
            <div>Text: @BindRadioItem.Text Value: @BindRadioItem.Value</div>
        </div>
    </div>
    <BlockLogger @ref="BinderLog" />
</Block>

<Block Title="竖向排列" Introduction="通过设置 <code>IsVertical</code> 使组件内部竖向排列">
    <RadioList TValue="string" Items="@DemoValues" IsVertical="true"></RadioList>
</Block>

<Block Title="绑定枚举类型" Introduction="通过双向绑定 <code>Value</code> 无需设置 <code>Items</code>">
    <RadioList @bind-Value="@SelectedEnumItem"></RadioList>
    <p class="mt-3">通过设置 <code>IsAutoAddNullItem</code> 自动添加 <b>空值</b> 选项,通过设置 <code>NullItemText</code> 自定义 <b>空值</b> 选项</p>
    <RadioList @bind-Value="@SelectedEnumItem" IsAutoAddNullItem="true" NullItemText="空值"></RadioList>
</Block>

<Block Title="颜色" Introduction="通过设置 <code>Color</code> 属性改变组件背景色">
    <div class="row g-3">
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Primary"></RadioList>
        </div>
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Success"></RadioList>
        </div>
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Danger"></RadioList>
        </div>
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Info"></RadioList>
        </div>
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Warning"></RadioList>
        </div>
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Secondary"></RadioList>
        </div>
    </div>
</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.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Radios
    {
        [NotNull]
        private BlockLogger? Trace { get; set; }

        [NotNull]
        private BlockLogger? BinderLog { get; set; }

        private IEnumerable<SelectedItem> DemoValues { get; set; } = new List<SelectedItem>(2)
        {
            new SelectedItem("1", "选项一"),
            new SelectedItem("2", "选项二"),
        };

        private Task OnSelectedChanged(IEnumerable<SelectedItem> values, string val)
        {
            var value = values.FirstOrDefault();
            Trace.Log($"组件选中值: {value?.Value} 显示值: {value?.Text} 组件 Value 值: {val}");
            return Task.CompletedTask;
        }

        private Task OnItemChanged(IEnumerable<SelectedItem> values, SelectedItem val)
        {
            var value = values.FirstOrDefault();
            BinderLog.Log($"组件选中值: {value?.Value} 显示值: {value?.Text}");
            return Task.CompletedTask;
        }

        private IEnumerable<SelectedItem> Items { get; set; } = new SelectedItem[]
        {
            new SelectedItem("1", "北京") { Active = true },
            new SelectedItem("2", "上海")
        };

        private SelectedItem BindRadioItem { get; set; } = new SelectedItem();

        [NotNull]
        private EnumEducation? SelectedEnumItem { get; set; }

        private static IEnumerable<AttributeItem> GetAttributes() => new[]
        {
            new AttributeItem() {
                Name = "DisplayText",
                Description = "显示文字",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "—"
            },
            new AttributeItem() {
                Name = "NullItemText",
                Description = "空值显示文字",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "—"
            },
            new AttributeItem() {
                Name = "IsDisabled",
                Description = "是否禁用",
                Type = "boolean",
                ValueList = "true / false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsVertical",
                Description = "是否垂直分布",
                Type = "boolean",
                ValueList = "true / false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsAutoAddNullItem",
                Description = "绑定可为空枚举类型时是否自动添加空值",
                Type = "boolean",
                ValueList = "true / false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "Items",
                Description = "绑定数据源",
                Type = "IEnumerable<TItem>",
                ValueList = " — ",
                DefaultValue = "—"
            }
        };

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = "OnSelectedChanged",
                Description="复选框状态改变时回调此方法",
                Type ="Func<IEnumerable<SelectedItem>, TValue, Task>"
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload