MudBlazor动态选项卡通过foreach in组件

Question

我试图在一个MudBlazor组件中使用foreach循环。因此制表符的动态长度取决于类别的数量。

<MudTabs Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-6">
@foreach (Category category in categories)
{
<MudTabPanel Text="@category.CategoryName">
</MudTabPanel>
}
</MudTabs>

执行时没有错误，只是没有显示。mudblazor组件似乎无法使用循环元素。

Answer 1

已解决:有必要将带有制表符的索引绑定到制表符

<MudTabs @bind-ActivePanelIndex="_index" Border="tru....

然后你可以在@code 中添加制表符

foreach (Category category in categories)
{
_tabs.Add(new TabView { Content = category.CategoryCode.ToString(), Name = category.CategoryName, Id = Guid.NewGuid() });
}

MudBlazor文档中的"高级动态标签"中的详细信息https://mudblazor.com/components/tabs advanced-dynamic-tabs

Answer 2

您是否记得包含MudBlazor css文件?

---

注意:如果你安装在一个新的Blazor模板上，请确保删除你的site.css中的所有内容，并从index.html或_Host.cshtml中完全删除bootstrap.min.css。

在index.html或_Host. HTML的HTML主体部分。CSHTML添加:

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

https://mudblazor.com/getting-started/installation a161e105 - 3665 - 4477 - 8427 - 77 - b800c64065