时间戳

首页 > 解决方案 > 是否可以扩展 blazor 组件的属性？

c# - 是否可以扩展 blazor 组件的属性？

问题描述

我想扩展组件中的属性。ItemsTabControl

所以而不是

<TabControl Items="@MyListOfItems" />

我想打开或扩展属性 - 不知道该怎么称呼它 - 并直接添加我的项目，而不是使用列表并将其定义为我的代码后面的 vanilla c# 或 @code 块

<TabControl>
    <TabControl.Items>
        <TabItem Title="foo">
            content for my <strong>foo</strong> page
        </TabItem>
        <TabItem Title="bar">
            content for my <strong>bar</strong> page
        </TabItem>
    </TabControl.Items>
</TabControl>

标签： c#blazorblazor-webassembly

解决方案

是的，你可以这样做。您将创建一个父组件，我们称之为TabSet.razor。然后在该组件中，您将需要一个RenderFragmentas a[Parameter]来处理子组件。然后您将需要一个Tab.razor组件来处理实际的选项卡内容/标题。这是一个非常简短的概述。但请参阅下面的链接以获取 Microsoft 的完整代码示例。

TabSet.Razor

<ul class="nav nav-tabs @CssClasses">
    @ChildContent
</ul>

[Parameter]
public RenderFragment ChildContent { get; set; }

用法：

<TabSet TabChange="TabChanged" @ref="_menuTabSet" CssClasses="mr-auto">
    <Tab Title="Dashboard" URI="Dashboard" />
    <Tab Title="Create Portfolio" URI="Portfolio/Create" />
    <Tab Title="Search" URI="Search" />
    <Tab Title="Sentiment Profiler" URI="SentimentProfiler" />
    <Tab Title="Using EDGE" URI="Help" />
    <Tab Title="Data Science" URI="DataScience" />
</TabSet>

Tab.razor

<li class="@TabActiveClass">
    @Title
</li>

[Parameter]
public string Title { get; set; }
[Parameter]
public string TabActiveClass { get; set; }

有一个很棒的微软指南，但是他们用一个表格示例代替了它，但是这里是该指南的历史参考：https ://github.com/dotnet/AspNetCore.Docs/blob/d5b7249fd16715a045d0077d147341d95c7f17bf/aspnetcore/blazor/组件/级联值和参数.md#tabset-example

推荐阅读