This section briefly explains about how to include a
Badge in your Blazor server-side application. You can refer Getting Started with Syncfusion Blazor for Server-Side in Visual Studio 2019 page for the introduction and configuring the common specifications.
Install Syncfusion.Blazor NuGet package to the application by using the
NuGet Package Manager.
Note: Please ensure to check the Include prerelease option for our Beta release.
You can add the client-side style resources using NuGet package to the
<head> element of the
~/wwwroot/index.html page in Blazor WebAssembly app or
~/Pages/_Host.cshtml page in Blazor Server app.
Note: You can also add the client-side style resources through CDN.
<head> <link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" /> </head>
<head> <link href="https://cdn.syncfusion.com/blazor/18.4.42/styles/bootstrap4.css" rel="stylesheet" /> </head>
Internet Explorer11 kindly refer the polyfills. Refer the documentation for more information.
<head> <link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" /> <script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script> </head>
Now, add the Syncfusion Blazor Badge component in any web page
razor in the
Pages folder. For example, the Badge component is added in the
<h1>Badge Component <span class="e-badge">New</span></h1>
After successful compilation of your application, simply press
F5 to run the application.
Output be like the below.