Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Radio

Single in a set of alternatives

Basic usage

Select selectors are recommended because the options are visible by default and should not be too many

Demo

Option one

Option two

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Radios> Localizer

<RadioList TValue="string" Items="@DemoValues" OnSelectedChanged="@OnSelectedChanged" />
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? Trace { get; set; }

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

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

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

        DemoValues = new List<SelectedItem>(2)
        {
            new SelectedItem("1", Localizer["RadiosItem1"]),
            new SelectedItem("2", Localizer["RadiosItem2"]) { IsDisabled = true }
        };
    }
}

Turn off the radio box

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

Demo

Item1

Item2

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Radios> Localizer

<RadioList TValue="string" Items="@DemoValues" IsDisabled="true" ShowBorder="false" />

@code {
    [NotNull]
    private IEnumerable<SelectedItem>? DemoValues { 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"]) { IsDisabled = true }
        };
    }
}

Label text

The radio box displays text

Demo

Button group

Item1

Item2

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Radios> Localizer

<RadioList TValue="string" Items="@DemoValues" ShowLabel="true" DisplayText="@Localizer["RadiosLabelText"]"></RadioList>

@code {
    [NotNull]
    private IEnumerable<SelectedItem>? DemoValues { 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"]) { IsDisabled = true }
        };
    }
}

Bind data in both directions

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

Demo

Beijing

Shanghai

Text: Beijing Value: 1

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Radios> Localizer

<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" />

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

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

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

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

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

        Items = new SelectedItem[]
        {
            new SelectedItem("1", Localizer["RadiosAdd1"]),
            new SelectedItem("2", Localizer["RadiosAdd2"])
        };
    }
}

Vertical arrangement

Make the components vertically arranged internally by setting the IsVertical

Demo

Item1

Item2

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Radios> Localizer

<RadioList TValue="string" Items="@DemoValues" IsVertical="true" />

@code {
    [NotNull]
    private IEnumerable<SelectedItem>? DemoValues { 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"]) { IsDisabled = true }
        };
    }
}

The binding enumeration type

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

Demo

Primary

中学

Primary

By setting the IsAutoAddNullItem automatically adds the empty valueoption, and by setting the NullItemText the custom nulloption

null

Primary

中学

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Radios> Localizer

<RadioList @bind-Value="@SelectedEnumItem" />
<p class="mt-2">@SelectedEnumItem</p>
<p>@((MarkupString)Localizer["RadiosEnumDescription"].Value)</p>
<RadioList @bind-Value="@SelectedEnumItem2" IsAutoAddNullItem="true" NullItemText="@Localizer["RadiosEnumText"]" />

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

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

ItemTemplate

Set ItemTemplate for customer the item UI

Demo

Item1

Item2

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Radios> Localizer

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

@code {
    [NotNull]
    private IEnumerable<IconSelectedItem>? IconDemoValues { get; set; }

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

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

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

Color

Change the component background color by setting the Color property

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Radios> Localizer

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

@code {
    [NotNull]
    private IEnumerable<SelectedItem>? DemoValues { 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"]) { IsDisabled = true }
        };
    }
}

Button Radio

Set IsButton to True make the radio item display as Button

Demo

Primary

中学

Primary

中学

Test

Primary

中学

Test

Primary

中学

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Radios> Localizer
@inject IStringLocalizer<Foo> LocalizerFoo

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

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

    [NotNull]
    private List<SelectedItem>? FooItems { get; set; }

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

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

        Model = Foo.Generate(LocalizerFoo);
        FooItems = Foo.GetCompleteItems(LocalizerFoo);
    }
}

Attributes

Event

B station related video link

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Radio

Single in a set of alternatives

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Attributes

Event

Bootstrap Blazor Component library updated to 7.4.4-beta01