Getting Started with Blazor Tabs in Blazor WASM App
1 Jul 202614 minutes to read
This section briefly explains about how to include Blazor Tabs component in a Blazor WebAssembly App using Visual Studio, Visual Studio Code, and the .NET CLI.
Create a new Blazor WASM App
Create a Blazor WebAssembly App using Visual Studio via Microsoft Templates or the Blazor Extension. For detailed instructions, refer to the Blazor WebAssembly App Getting Started documentation.
Run the following command to create a new Blazor WebAssembly App.
dotnet new blazorwasm -o BlazorApp
cd BlazorAppAlternatively, create a Blazor WebAssembly App using Visual Studio Code via Microsoft Templates, the Blazor Extension, or the C# Dev Kit extension.
Run the following command to create a new Blazor WebAssembly App.
dotnet new blazorwasm -o BlazorApp
cd BlazorAppInstall the required Blazor packages
Install Syncfusion.Blazor.Navigations and Syncfusion.Blazor.Themes NuGet packages. All Syncfusion Blazor packages are available on nuget.org. See the NuGet packages topic for details.
- Go to Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
- Search the required NuGet packages (
Syncfusion.Blazor.NavigationsandSyncfusion.Blazor.Themes) and install them.
Alternatively, you can install the same packages using the Package Manager Console with the following commands.
Install-Package Syncfusion.Blazor.Navigations -Version 34.1.29
Install-Package Syncfusion.Blazor.Themes -Version 34.1.29Open the terminal and run the following commands.
dotnet add package Syncfusion.Blazor.Navigations -v 34.1.29
dotnet add package Syncfusion.Blazor.Themes -v 34.1.29Open the command prompt and run the following commands.
dotnet add package Syncfusion.Blazor.Navigations -v 34.1.29
dotnet add package Syncfusion.Blazor.Themes -v 34.1.29Add import namespaces
After the packages are installed, open the ~/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.Navigations namespaces.
@using Syncfusion.Blazor
@using Syncfusion.Blazor.NavigationsRegister the Blazor service
Open the Program.cs file in Blazor WebAssembly App and register the Blazor service.
....
using Syncfusion.Blazor;
....
builder.Services.AddSyncfusionBlazor();
....Add stylesheet and script resources
The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet and script references in the ~wwwroot/index.html file.
...
<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
...
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>Add Blazor Tabs component
Open a Razor file located in the ~/Pages/*.razor (for example, Home.razor) and add the Blazor Tabs component inside the razor file.
@using Syncfusion.Blazor.Navigations
<SfTab>
<TabItems>
<TabItem Content="Twitter is an online social networking service that enables users to send and read short 140-charactermessages called tweets.Registered users can read and post tweets, but those who are unregistered can only readthem.Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in SanFrancisco and has more than 25 offices around the world.Twitter was created in March 2006 by Jack Dorsey,Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity,with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billionsearch queries per day.">
<ChildContent>
<TabHeader Text="Twitter"></TabHeader>
</ChildContent>
</TabItem>
<TabItem Content="Facebook is an online social networking service headquartered in Menlo Park, California. Its website waslaunched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students EduardoSaverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.">
<ChildContent>
<TabHeader Text="Facebook"></TabHeader>
</ChildContent>
</TabItem>
<TabItem Content="WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operatesunder a subscription business model.It uses the Internet to send text messages, images, video, user location andaudio media messages to other users using standard cellular mobile numbers. As of February 2016, WhatsApp had a userbase of up to one billion,[10] making it the most globally popular messaging application.WhatsApp Inc., based inMountain View, California, was acquired by Facebook Inc.on February 19, 2014, for approximately US$19.3 billion.">
<ChildContent>
<TabHeader Text="Whatsapp"></TabHeader>
</ChildContent>
</TabItem>
</TabItems>
</SfTab>Run the application
Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Tabs component will render in your default web browser.
Open the terminal and run the following command.
dotnet runOpen the command prompt and run the following command.
dotnet run
NOTE
Initialize Blazor Tab Content using Template
Tab provides support to render content using ContentTemplate property. You can give preferred content inside the ContentTemplate element.
NOTE
ContentTemplateproperty supportsRenderFragmenttype to render content.
The following code explains how to initialize tab content using ContentTemplate.
@using Syncfusion.Blazor.Navigations
<SfTab>
<TabItems>
<TabItem>
<ChildContent>
<TabHeader Text="HTML"></TabHeader>
</ChildContent>
<ContentTemplate>
<div>HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually engaging web pages, user interfaces for web applications, and user interfaces for many mobile applications.[1] Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.</div>
</ContentTemplate>
</TabItem>
<TabItem>
<ChildContent>
<TabHeader Text="Java"></TabHeader>
</ChildContent>
<ContentTemplate>
<div>Java is a set of computer software and specifications developed by Sun Microsystems, later acquired by Oracle Corporation, that provides a system for developing application software and deploying it in a cross-platform computing environment. Java is used in a wide variety of computing platforms from embedded devices and mobile phones to enterprise servers and supercomputers. While less common, Java applets run in secure, sandboxed environments to provide many features of native applications and can be embedded in HTML pages.</div>
</ContentTemplate>
</TabItem>
<TabItem>
<ChildContent>
<TabHeader Text="JavaScript"></TabHeader>
</ChildContent>
<ContentTemplate>
<div>JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.[5] More recently, however, it has become common in both game development and the creation of desktop applications.</div>
</ContentTemplate>
</TabItem>
</TabItems>
</SfTab>
Two way binding of SelectedItem
The property SelectedItem supports two way property binding, in the following code example if either the value is changed in numeric text box or selected tab item is changed, it will reflect in both the value of numeric text box and selected tab item.
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Navigations
Selected Tab
<SfNumericTextBox TValue="int" @bind-Value="@SelectedTab" Min="0" Max="4" Width="200px"></SfNumericTextBox>
<SfTab @bind-SelectedItem="SelectedTab">
<TabItems>
<TabItem Content="HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually engaging web pages, user interfaces for web applications, and user interfaces for many mobile applications.[1] Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.">
<ChildContent>
<TabHeader Text="HTML"></TabHeader>
</ChildContent>
</TabItem>
<TabItem Content="C# is intended to be a simple, modern, general-purpose, object-oriented programming language. Its development team is led by Anders Hejlsberg. The most recent version is C# 5.0, which was released on August 15, 2012.">
<ChildContent>
<TabHeader Text="C Sharp(C#)"></TabHeader>
</ChildContent>
</TabItem>
<TabItem Content="Java is a set of computer software and specifications developed by Sun Microsystems, later acquired by Oracle Corporation, that provides a system for developing application software and deploying it in a cross-platform computing environment. Java is used in a wide variety of computing platforms from embedded devices and mobile phones to enterprise servers and supercomputers. While less common, Java applets run in secure, sandboxed environments to provide many features of native applications and can be embedded in HTML pages.">
<ChildContent>
<TabHeader Text="Java"></TabHeader>
</ChildContent>
</TabItem>
<TabItem Content="Python is a high-level, general-purpose programming language. Its design philosophy emphasizes code readability with the use of significant indentation. Python is dynamically typed and garbage-collected. It supports multiple programming paradigms, including structured, object-oriented and functional.">
<ChildContent>
<TabHeader Text="Python"></TabHeader>
</ChildContent>
</TabItem>
<TabItem Content="TypeScript is a newcomer to top programming language lists, but it’s making headway. It was developed in 2012 by Microsoft and is a typed version of JavaScript that is well suited for large code bases. TypeScript is used to create JavaScript-based projects with typing in both client-side and server-side development, making useful for catching errors and preventing systemic issues.">
<ChildContent>
<TabHeader Text="TypeScript"></TabHeader>
</ChildContent>
</TabItem>
</TabItems>
</SfTab>
@code {
private int SelectedTab = 0;
}