1. Home
  2. Forum
  3. Blazor
  4. Tab components not showing up

Tab components not showing up

Hi All,

I'm new to Blazor and a first time user to Syncfusion Blazor components. I followed this instructions for the tab demo  Getting Started with Blazor Tabs Component | Syncfusion for .NET 8.   The only changes I made was adding the Add stylesheet and script resources​ to App.razor as shown below (need to crop image to make it less than 100KB for image upload)Screenshot.png

When I ran my project and navigate to index page, I see nothing.  why? and what am I missing?

Here are my code.  TIA.

program.cs

using FormBuilderBlazor.Components;

using Syncfusion.Blazor;


var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddRazorComponents();

builder.Services.AddSyncfusionBlazor();

var app = builder.Build();

Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("***************************");


_Imports.razor file

@using Syncfusion.Blazor

@using Syncfusion.Blazor.Navigations


Index.razor

@page "/Index"

<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="Detail 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, Details had a userbase .">

            <ChildContent>

                <TabHeader Text="Details"></TabHeader>

            </ChildContent>

        </TabItem>

    </TabItems>

</SfTab>


1 Reply
VR Vijay Ravi Syncfusion Team November 19, 2024 10:38 AM UTC

Hi Steve Lau,
 

We have reviewed your query and the provided documentation link. It appears that you have referred to the .NET 6 project creation documentation to prepare a sample in .NET 8. As a result, the component is not rendering as expected.
 

To resolve this, we have shared the appropriate documentation for creating a .NET 8 project below. Please refer to it and create the project accordingly. Additionally, we have prepared and shared a Tabs sample specific to .NET 8 for your reference.

Getting started for .net 8: Getting started with Syncfusion Tabs Component in Blazor Web App

[App.razor]

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <base rel='nofollow' href="/" />

    <link rel="stylesheet" rel='nofollow' href="bootstrap/bootstrap.min.css" />

    <link rel="stylesheet" rel='nofollow' href="app.css" />

    <link rel="stylesheet" rel='nofollow' href="BlazorTabSample.styles.css" />

    <link rel="icon" type="image/png" rel='nofollow' href="favicon.png" />

    <link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

    <HeadOutlet />

</head>

 

<body>

    <Routes />

    <script src="_framework/blazor.web.js"></script>

    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

</body>



[Program.cs]
 

using Syncfusion.Blazor;

 

var builder = WebApplication.CreateBuilder(args);

 

// Add services to the container.

builder.Services.AddRazorComponents()

    .AddInteractiveServerComponents();

builder.Services.AddSyncfusionBlazor();

var app = builder.Build();


[index.razor]
 

@page "/index"

 

@rendermode InteractiveServer

 

<SfTab>

    <TabItems>

        <TabItem Content="Twitter.">

            <ChildContent>

                <TabHeader Text="Twitter"></TabHeader>

            </ChildContent>

        </TabItem>

        <TabItem Content="Facebook">

            <ChildContent>

                <TabHeader Text="Facebook"></TabHeader>

            </ChildContent>

        </TabItem>

        <TabItem Content="WhatsApp Messenger ">

            <ChildContent>

                <TabHeader Text="Whatsapp"></TabHeader>

            </ChildContent>

        </TabItem>

    </TabItems>

</SfTab>

 


Sample attached as zip file.


Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay


Attachment: BlazorTabSample_6903fe1f.zip

Loader.
Up arrow icon