
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
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
Change the component background color by setting the Color
property
Demo
Set IsButton
to True
make the radio item display as Button
Demo
Attributes
Event
@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="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/
using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
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; }
[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);
}
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>"
}
};
}