Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

Radio

Single in a set of alternatives

Basic usage

Demo

The unavailable status of the radio box is IsDisabled='true'

Demo

The radio box displays text

Demo

Binding variables within a component, data automatically synchronized, binding an array of selectedItem types

Demo
Text: Beijing Value: 1

Make the components vertically arranged internally by setting the IsVertical

Demo

You do not need to set up Items Value by binding both directions

Demo

Primary

By setting the IsAutoAddNullItem automatically adds the empty value option, and by setting the NullItemText the custom null option

Change the component background color by setting the Color property

Demo

Attributes

Loading...

Event

Loading...
@page "/radios"
@inject IStringLocalizer<Radios> Localizer

<h3>Radio</h3>

<h4>Single in a set of alternatives</h4>

<DemoBlock Title="Basic usage" Introduction="Basic usage" Name="Normal">
    <RadioList TValue="string" Items="@DemoValues" OnSelectedChanged="@OnSelectedChanged"></RadioList>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Turn off the radio box" Introduction='The unavailable status of the radio box is <code>IsDisabled='true'</code>' Name="Disable">
    <RadioList TValue="string" Items="@DemoValues" IsDisabled="true" ShowBorder="false"></RadioList>
</DemoBlock>

<DemoBlock Title="Label text" Introduction="The radio box displays text" Name="Label">
    <RadioList TValue="string" Items="@DemoValues" ShowLabel="true" DisplayText="Button group"></RadioList>
</DemoBlock>

<DemoBlock Title="Bind data in both directions" Introduction="Binding variables within a component, data automatically synchronized, binding an array of selectedItem types" Name="Binding">
    <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" />
</DemoBlock>

<DemoBlock Title="Vertical arrangement" Introduction="Make the components vertically arranged internally by setting the <code>IsVertical</code>" Name="Vertical">
    <RadioList TValue="string" Items="@DemoValues" IsVertical="true"></RadioList>
</DemoBlock>

<DemoBlock Title="The binding enumeration type" Introduction="You do not need to set up <code>Items</code> <code>Value</code> by binding both directions" Name="Enum">
    <RadioList @bind-Value="@SelectedEnumItem"></RadioList>
    <p class="mt-2">@SelectedEnumItem</p>
    <p>By setting the <code>IsAutoAddNullItem</code> automatically adds the <b> empty value </b> option, and by setting the <code>NullItemText</code> the custom <b> null </b> option</p>
    <RadioList @bind-Value="@SelectedEnumItem2" IsAutoAddNullItem="true" NullItemText="null"></RadioList>
</DemoBlock>

<DemoBlock Title="Color" Introduction="Change the component background color by setting the <code>Color</code> property" Name="Color">
    <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>
</DemoBlock>

<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.Components;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Samples;

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

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

    [NotNull]
    private IEnumerable<SelectedItem>? DemoValues { get; set; }

    private Task OnSelectedChanged(IEnumerable<SelectedItem> values, string val)
    {
        var value = values.FirstOrDefault();
        Trace.Log($"{Localizer["Log1"]} {value?.Value}  {Localizer["Log1"]}{value?.Text}  {Localizer["Log3"]}{val}");
        return Task.CompletedTask;
    }

    private Task OnItemChanged(IEnumerable<SelectedItem> values, SelectedItem val)
    {
        var value = values.FirstOrDefault();
        BinderLog.Log($"{Localizer["Log1"]} {value?.Value} {Localizer["Log1"]} {value?.Text}");
        return Task.CompletedTask;
    }

    [NotNull]
    private IEnumerable<SelectedItem>? Items { get; set; }

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

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

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

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        DemoValues = new List<SelectedItem>(2)
            {
                new SelectedItem("1", Localizer["Item1"]!),
                new SelectedItem("2", Localizer["Item2"]!),
            };
        Items = new SelectedItem[]
        {
                new SelectedItem("1", Localizer["Add1"]!) { Active = true },
                new SelectedItem("2", Localizer["Add2"]!)
        };
    }

    private IEnumerable<AttributeItem> GetAttributes() => new[]
    {
            new AttributeItem() {
                Name = "DisplayText",
                Description = Localizer["Att1"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = "—"
            },
            new AttributeItem() {
                Name = "NullItemText",
                Description = Localizer["Att2"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = "—"
            },
            new AttributeItem() {
                Name = "IsDisabled",
                Description = Localizer["Att3"],
                Type = "boolean",
                ValueList = "true / false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsVertical",
                Description = Localizer["Att4"],
                Type = "boolean",
                ValueList = "true / false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsAutoAddNullItem",
                Description = Localizer["Att5"],
                Type = "boolean",
                ValueList = "true / false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "Items",
                Description = Localizer["Att6"],
                Type = "IEnumerable<TItem>",
                ValueList = " — ",
                DefaultValue = "—"
            }
        };

    /// <summary>
    /// 获得事件方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<EventItem> GetEvents() => new EventItem[]
    {
            new EventItem()
            {
                Name = "OnSelectedChanged",
                Description = Localizer["Event1"],
                Type ="Func<IEnumerable<SelectedItem>, TValue, Task>"
            }
    };
}

B 站相关视频链接

暂无

交流群

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