英文:
How do you display different Components when selecting MudRadio's
问题
点击MudRadio按钮（在MudDialog中）时，我想要实现的功能是，在MudDialog中显示不同的组件。
我搜索了一个示例，但找不到我要找的内容。
英文:
I would like to implement the functionality when clicking a MudRadio button (in a MudDialog), it should display a different component in the the MudDialog.
I searched for an example and couldn't find what I'm looking for
答案1
得分: 1
以下是您要的中文翻译部分：
你需要有一个 MudRadioGroup 来容纳你的 MudRadio 按钮。在 MudRadioGroup 上，你有 @bind-SelectedOption 事件回调可供使用。你可以在那里设置一个开关语句，以动态渲染你的其他组件。
以下是一个示例项目，可以完成你想要做的事情：
https://try.mudblazor.com/snippet/wOmRucPSpMDbtnAw
ParentComponent.razor
<MudForm>
<MudRadioGroup @bind-SelectedOption="SelectedOption">
<MudRadio Option="@(Add)" Color="Color.Primary">Primary</MudRadio>
<MudRadio Option="@(Radio 2)" Color="Color.Secondary">Secondary</MudRadio>
<MudRadio Option="@(Radio 3)">Default</MudRadio>
<MudRadio Option="@(Radio 4)" Color="Color.Primary" Disabled="true">Disabled</MudRadio>
</MudRadioGroup>
</MudForm>
@switch(SelectedOption)
{
case "Add":
<TestComponent />
break;
}
<div class="d-flex align-center">
<MudButton Variant="Variant.Outlined" OnClick="Reset">Reset</MudButton>
<MudText Class="ml-4">Selected Option: @SelectedOption</MudText>
</div>
@code {
public string SelectedOption { get; set; }
private void Reset()
{
SelectedOption = null;
}
}
TestComponent.razor
<h1>来自 TestComponent 的问候</h1>
英文:
You need to have a MudRadioGroup to contain your MudRadio buttons. On the MudRadioGroup you have the @bind-SelectedOption event callback exposed. You can set a switch statement on that to dynamically render your other components.
Here is a sample project to accomplish what you're trying to do:
https://try.mudblazor.com/snippet/wOmRucPSpMDbtnAw
ParentComponent.razor
<MudForm>
<MudRadioGroup @bind-SelectedOption="@SelectedOption">
<MudRadio Option="@("Add")" Color="Color.Primary">Primary</MudRadio>
<MudRadio Option="@("Radio 2")" Color="Color.Secondary">Secondary</MudRadio>
<MudRadio Option="@("Radio 3")">Default</MudRadio>
<MudRadio Option="@("Radio 4")" Color="Color.Primary" Disabled="true">Disabled</MudRadio>
</MudRadioGroup>
</MudForm>
@switch(SelectedOption)
{
case "Add":
<TestComponent />
break;
}
<div class="d-flex align-center">
<MudButton Variant="Variant.Outlined" OnClick="Reset">Reset</MudButton>
<MudText Class="ml-4">Selected Option: @SelectedOption</MudText>
</div>
@code {
public string SelectedOption { get; set; }
private void Reset()
{
SelectedOption = null;
}
}
TestComponent.razor
<h1>Hi from: TestComponent</h1>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论