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
@rendermode
attribute e.g. <RadzenDialog @rendermode="@RenderMode.InteractiveServer" />
.
Components that have child content cannot use that approach. You will need a wrapper component with render mode set as an attribute.
Open the _Imports.razor
file of your Blazor application and add these two lines @using Radzen
and @using Radzen.Blazor
.
Open Pages\_Layout.cshtml
(Blazor Server .NET 6), Pages\_Host.cshtml
(Blazor Server .NET 7), wwwroot/index.html
(Blazor WebAssembly)
or Components\App.razor
(Blazor .NET 8) and include a theme CSS file by adding this snippet:
<link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
To include a different theme (i.e. Standard) just change the name of the CSS file:
<link rel="stylesheet" href="_content/Radzen.Blazor/css/standard-base.css">
Make sure you have also bootstrap CSS:
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
Open Pages\_Layout.cshtml
(Blazor Server .NET 6), Pages\_Host.cshtml
(Blazor Server .NET 7), wwwroot/index.html
(Blazor WebAssembly)
or Components\App.razor
(Blazor .NET 8) 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:
<RadzenComponents/>
Open Startup.cs
file (Blazor Server before .NET 6) or Program.cs
(Blazor WebAssembly or Blazor Server after .NET 6) and add required services:
using Radzen;
...
public void ConfigureServices(IServiceCollection services)
{
...
services.AddRadzenComponents();
...
}
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.AddRadzenComponents();
...
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 Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles. Write less code and get more done.
Radzen Blazor Components, © 2018-2024 Radzen.
Source Code licensed under
MIT
Premium Themes
Free Themes