[英]Is it possible to expand a property of a blazor component?
I want to expand the property Items
in my TabControl
component.我想在我的
TabControl
组件中展开属性Items
。
So instead of所以而不是
<TabControl Items="@MyListOfItems" />
I want to open or expand the property - not sure what to call this - and add my items directly instead of using a list and defining it as vanilla c# in my code behind or @code block我想打开或扩展属性 - 不知道该怎么称呼它 - 并直接添加我的项目,而不是使用列表并将其定义为 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>
Yup, you can do this.是的,你可以这样做。 You will create a parent component, let's call it
TabSet.razor
.您将创建一个父组件,我们将其命名为
TabSet.razor
。 Then inside that component you will need to have a RenderFragment
as a [Parameter]
to handle the child components.然后在该组件内部,您需要将
RenderFragment
作为[Parameter]
来处理子组件。 Then you will need a Tab.razor
component to handle the actual tab content/title.然后你需要一个
Tab.razor
组件来处理实际的标签内容/标题。 Here's a very brief overview.这是一个非常简短的概述。 But see the link below for the full code sample from Microsoft.
但请参阅下面的链接以获取 Microsoft 的完整代码示例。
TabSet.Razor TabSet.Razor
<ul class="nav nav-tabs @CssClasses">
@ChildContent
</ul>
[Parameter]
public RenderFragment ChildContent { get; set; }
Usage:用法:
<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 Tab.razor
<li class="@TabActiveClass">
@Title
</li>
[Parameter]
public string Title { get; set; }
[Parameter]
public string TabActiveClass { get; set; }
There was a fantastic Microsoft guide for this but they replaced it with a Table example instead, however here is the historical reference to that guide: https://github.com/dotnet/AspNetCore.Docs/blob/d5b7249fd16715a045d0077d147341d95c7f17bf/aspnetcore/blazor/components/cascading-values-and-parameters.md#tabset-example有一个很棒的微软指南,但他们用表格示例代替了它,但是这里是该指南的历史参考: https://github.com/dotnet/AspNetCore.Docs/blob/d5b7249fd16715a045d0077d147341d95c7f17bf/aspnetcore/blazor/组件/级联值和参数.md#tabset-example
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.