Radzen Blazor Components are distributed as the Radzen.Blazor nuget package.
You can add them to your project in one of the following ways
dotnet add package Radzen.Blazor
Open the _Imports.razor
file of your Blazor application and add these two lines @using Radzen
and @using Radzen.Blazor
.
Open the _Host.cshtml
file (server-side Blazor) or wwwroot/index.html
(client-side WebAssembly Blazor) and include a theme CSS file by adding this snippet:
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css">
Optionally include Bootstrap.
Radzen also ships with themes that include some vital parts of Bootstrap (mostly layout). To use a theme bundled with Bootstrap include the file without -base
suffix:
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">
Open the _Host.cshtml
file (server-side Blazor) or wwwroot/index.html
(client-side WebAssembly Blazor) and include this snippet
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
Use any Radzen Blazor component by typing its tag name in a Blazor page e.g. <RadzenButton Text="Hi"></RadzenButton>
<RadzenButton Text="@text"></RadzenButton>
@code {
string text = "Hi";
}
<RadzenButton Click="@ButtonClicked" Text="Hi"></RadzenButton>
@code {
void ButtonClicked()
{
//
}
}
Open the Shared/MainLayout.razor
file and include:
<RadzenDialog/>
<RadzenNotification/>
<RadzenContextMenu/>
<RadzenTooltip/>
Open the Startup.cs
file (server-side Blazor) or Program.cs
(client-side WebAssembly Blazor) and add:
using Radzen;
...
public void ConfigureServices(IServiceCollection services)
{
...
services.AddScoped<DialogService>();
services.AddScoped<NotificationService>();
services.AddScoped<TooltipService>();
services.AddScoped<ContextMenuService>();
...
}
using Radzen;
...
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
...
builder.Services.AddScoped<DialogService>();
builder.Services.AddScoped<NotificationService>();
builder.Services.AddScoped<TooltipService>();
builder.Services.AddScoped<ContextMenuService>();
...
await builder.Build().RunAsync();
}
Hooray! You have successfuly added Radzen Blazor Components to your Blazor app. Now let's take a deeper look and explore more components and demos.
Radzen is a desktop tool that gives you the power to create line of business applications. Build and launch Blazor apps visually, while we generate clean code for you.
Source Code licensed under MIT