CODEWITHSUNDEEP
c#blazorblazor-webassembly
boop
boop

Reputation: 7788

Is it possible to expand a property of a blazor component?

I want to expand the property Items in my TabControl component.

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

<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>

Upvotes: 0

Views: 433

Answers (1)

Cory Podojil
Cory Podojil

Reputation: 854

Yup, you can do this. You will create a parent component, let's call it TabSet.razor. Then inside that component you will need to have a RenderFragment as a [Parameter] to handle the child components. Then you will need a Tab.razor component to handle the actual tab content/title. Here's a very brief overview. But see the link below for the full code sample from Microsoft.

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

<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

Upvotes: 1

Related Questions