In this video we’ll look at how to Get Started with the DevExpress Tabs for Blazor.
The Tabs component allows you to create tabbed interfaces on your web pages.
I’ll show you how to build a simple Blazor application that uses tabs to display content and how to customize the tab’s appearance.
I have already created a Blazor application using the DevExpress template.
I open Pages/Index.razor and remove predefined content.
Then add the DxTabs open and close tags to the page.
is a component that contains multiple tabs.
The DxTabPage component implements a single tab and its content.
I add some tabs to markup and use the Text property to specify the tab's text.
Tab-based components are designed to always display content. Let's add content.
I put my custom HTML markup between the DxTabPage open and close tags.
I run the application.
You can see the content I just added. I click a tab to activate it. The content changes according to the active tab.
Only one tab can be active at a time.
When the active tab changes, the ActiveTabIndexChanged event fires.
To activate a tab in code, I declare the ActiveTabIndex variable
And bind it to the ActiveTabIndex property.
I’m using two-way binding, so Blazor handles the ActiveTabIndexChanged event implicitly.
I output the current active tab.
I run the application again.
You can see that the "Web Controls" tab is active as I specified.
You can choose how the Tabs component loads content.
I specify the RenderMode property
The Default option loads only content of an active tab and does not keep the tab state when the active tab changes.
The AllTabs option renders content of all tabs in the DOM.
The OnDemand option initially loads content of the active tab and loads content of other tabs when they become active.
In this case, the component maintains the tab states.
I’ll choose the latter option.
Run the application again and open dev-tools.
I inspect the Web Controls tab’s content.
You can see the unordered list in the DOM while the content of the other tabs are not present.
Now, I click the Support tab. And its content appears in the DOM.
Now, let's add an icon to a tab.
I use one of the open icon css classes and specify it as the TabIconCssClass property value.
I run the application.
You can now see that the "Support” tab displays an icon next to its text.
When the DxTabs component contains a lot of tabs, they may not fit their container width.
To demonstrate this, I add more tabs to the component
I set the ScrollMode property value to NavButtons to align all tabs in one row and use buttons to navigate between them.
I run the application again.
You can see buttons that I use for navigation within the component.
You can specify other property values, for example
to swipe or allow the component to choose between swiping and displaying navigation buttons depending on the device type
And that's it for this video. If you liked it, please give us a thumbs up.
If you have any questions, do not hesitate to comment below.
And don’t forget to subscribe and ring the bell so you get notified about all new videos.
Thanks for watching and thank you for choosing DevExpress.