logoEnterprise-level component library based on Bootstrap and Blazor
gitee
version
license
download
repo
commit
build
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: Value:

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 valueoption, and by setting the NullItemText the custom nulloption

Set ItemTemplate for customer the item UI

Demo

Change the component background color by setting the Color property

Demo

Set IsButton to True make the radio item display as Button

Demo
Primary
中学
Primary
中学
Primary
中学
Primary
中学
Pass
Failed

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">
            Text: @BindRadioItem.Text Value: @BindRadioItem.Value
        </div>
    </div>
    <BlockLogger class="mt-3" @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="ItemTemplate" Introduction="Set <code>ItemTemplate</code> for customer the item UI" Name="ItemTemplate">
    <RadioList TValue="string" Items="@IconDemoValues" IsVertical="true">
        <ItemTemplate>
            @if (context is IconSelectedItem item)
            {
                <div>
                    <i class="@item.Icon"></i>
                    <span>@item.Text</span>
                </div>
            }
        </ItemTemplate>
    </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>

<DemoBlock Title="Button Radio" Introduction="Set <code>IsButton</code> to <code>True</code> make the radio item display as Button" Name="IsButton">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <RadioList IsButton="true" @bind-Value="@SelectedEnumItem"></RadioList>
        </div>
        <div class="col-12 col-sm-6">
            <RadioList IsButton="true" @bind-Value="@SelectedEnumItem" IsDisabled="true" Color="Color.Danger"></RadioList>
        </div>
        <div class="col-12 col-sm-6">
            <RadioList IsButton="true" @bind-Value="@SelectedEnumItem" Color="Color.Success" ShowLabel="true" DisplayText="Test"></RadioList>
        </div>
        <div class="col-12 col-sm-6">
            <RadioList IsButton="true" @bind-Value="@SelectedEnumItem" Color="Color.Info" ShowLabel="true" DisplayText="Test"></RadioList>
        </div>
    </div>

    <ValidateForm Model="Model" class="mt-3">
        <div class="row g-3 form-inline">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model.Name" />
            </div>
            <div class="col-12 col-sm-6">
                <RadioList @bind-Value="@Model.Complete" IsButton="true" Items="FooItems" />
            </div>
        </div>
    </ValidateForm>
</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/

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; }

    [NotNull]
    private IEnumerable<IconSelectedItem>? IconDemoValues { 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; }

    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? LocalizerFoo { get; set; }

    [NotNull]
    private Foo? Model { get; set; }

    [NotNull]
    private List<SelectedItem>? FooItems { 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"])
        };
        Model = Foo.Generate(LocalizerFoo);
        FooItems = Foo.GetCompleteItems(LocalizerFoo);

        IconDemoValues = new List<IconSelectedItem>()
        {
            new IconSelectedItem() { Text = "Item1", Value = "1", Icon = "fa-solid fa-users" },
            new IconSelectedItem() { Text = "Item2", Value = "2", Icon = "fa-solid fa-users-gear" }
        };
    }

    private IEnumerable<AttributeItem> GetAttributes() => new[]
    {
        new AttributeItem() {
            Name = "DisplayText",
            Description = Localizer["Att1"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = "—"
        },
        new AttributeItem() {
            Name = "GroupName",
            Description = Localizer["GroupName"],
            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 = nameof(RadioList<string>.IsButton),
            Description = Localizer["IsButton"],
            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>"
        }
    };

    class IconSelectedItem : SelectedItem
    {
        public string? Icon { get; set; }
    }
}

B station related video link

No

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
img
Themes
Bootstrap
Motronic
Ant Design (完善中)
DevUI (制作中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload
Seems like the connection with the server has been lost. It can be due to poor or broken network. Please hang on while we're trying to reconnect...
Oh snap! Failed to reconnect with the server. This is typically caused by a longer network outage, or if the server has been taken down. You can try to reconnect, but if that does not work, you need to reload the page.
Oh man! The server rejected the attempt to reconnect. The only option now is to reload the page, but be prepared that it won't work, since this is typically caused by a failure on the server.
Bootstrap Blazor Component library updated to 7.0.8-beta05

Bootstrap Blazor at present has more than 120 components. This component is based on Bootstrap Blazor An enterprise-level component library that provides several types of common components such as layout, navigation, form, data, notification, icon, voice, etc. Each component has been carefully designed with modularity, responsiveness and excellent performance. Starting from more practical scenarios, meeting the needs of various scenarios, greatly reducing the time cost of developers, greatly shortening the development cycle, greatly improving development efficiency, and providing a set of General Rights Management System Example project。Bootstrap Blazor Products are maintained by a professional full-time technical team, with efficient response speed, diversified solutions, long-term support, and enterprise-level support. At present, it has been used in many well-known state-owned enterprises, and the project is running stably with a maximum of 1200 people online. On the right is the QR code of the Chinese Blazor QQ community with the largest number of people in China, welcome to scan and join the group.

component updated to 6.6.0 Change log [portal] If the component brings you convenience, please help to light up the project Star github gitee

QQGroup
QQ 795206915