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

Posted

技术标签:

【中文标题】MudBlazor 动态选项卡通过组件中的 foreach【英文标题】:MudBlazor dynamic tabs through foreach in component 【发布时间】:2021-10-13 22:49:00 【问题描述】:

我正在尝试在 MudBlazor 组件中使用 foreach 循环。所以选项卡的长度取决于类别的数量。

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

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

【问题讨论】:

【参考方案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

【讨论】:

【参考方案2】:

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


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

在 index.html 或 _Host.cshtml 的 HTML 正文部分添加:

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

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

【讨论】:

如编辑中所见,我已按照文档中的建议添加了更改

以上是关于MudBlazor 动态选项卡通过组件中的 foreach的主要内容,如果未能解决你的问题,请参考以下文章

带有 Vue 选项卡的组件标签中的动态道具

如何让 MudBlazor 组件像普通 HTML 元素一样工作

在 blazor 应用程序中使用 mudblazor 实现通用表格组件。 .net 核心

更改 MudBlazor 图表的外观

动态组件(选项卡):

Angular - 动态加载选项卡名称和组件