MudBlazor 动态选项卡通过组件中的 foreach

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

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

Note: If you're installing on a fresh Blazor template make sure to remove everything in your site.css and remove the bootstrap.min.css completely from either index.html or _Host.cshtml.

In the HTML body section of either index.html or _Host.cshtml add this:

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

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

Answer 2

已解决：必须将带标签的索引绑定到标签

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

然后你可以在@code中添加Tabs

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

MudBlazor 动态选项卡通过组件中的 foreach

MudBlazor dynamic tabs through foreach in component

c#

asp.net

blazor

mudblazor