Skip to content

Latest commit

 

History

History
217 lines (211 loc) · 8.16 KB

getting-started.md

File metadata and controls

217 lines (211 loc) · 8.16 KB
Raw
<style> .tabs { display: flex; flex-wrap: wrap; } .tabs-radio { position: absolute; opacity: 0; } .tabs-label { width: 80px; } .tabs-content { display: none; width: 100%; order:99; } .tabs-radio:checked + .tabs-label + .tabs-content { display: block; } </style>

Interactivity and SSR

All interactive features of the Radzen Blazor components require interactivity for the container .razor file to be enabled or the @rendermode attribute of the component to be set to one of the following values: InteractiveServer, InteractiveAuto or @InteractiveWebAssembly. More info is available in the rendering mode article from the official Blazor documentation.

Install

The Radzen Blazor components are distributed via the Radzen.Blazor nuget package.

You can add the nuget package to your Blazor application in one of the following ways:

  • Via Visual Studio's Nuget Package Manager
  • Via command line dotnet add package Radzen.Blazor
  • By editing your application's .csproj file and adding a package reference lt;PackageReference Include="Radzen.Blazor" Version="*" />

Import the namespaces

Import the namespaces by adding the following lines to _Imports.razor: 

  
@using Radzen
@using Radzen.Blazor

Set the theme

.NET 8

Open the App.razor file of your application. Add this code within the <head> element:


<RadzenTheme Theme="material" @rendermode="InteractiveAuto" />
Use a render mode which you have enabled for your application. You can also omit the @rendermode attribute if you don't need interactive theme features such as changing the theme at runtime.
.NET 7 Server
Open the Pages\_Host.cshtml file of your application. Add this code within the <head> element:


<component type="typeof(RadzenTheme)" render-mode="ServerPrerendered" param-Theme="@("material")" />
.NET 7 WebAssembly
Open the Pages\_Host.cshtml file of your application. Add this code within the <head> element:


<component type="typeof(RadzenTheme)" render-mode="WebAssemblyPrerendered" param-Theme="@("material")" />
.NET 6 Server
Open the Pages\_Layout.cshtml file of your application. Add this code within the <head> element:


<component type="typeof(RadzenTheme)" render-mode="ServerPrerendered" param-Theme="@("material")" />
.NET 6 WebAssembly
Open the Pages\_Layout.cshtml file of your application. Add this code within the <head> element:


<component type="typeof(RadzenTheme)" render-mode="WebAssemblyPrerendered" param-Theme="@("material")" />
WebAssembly (standalone)
If you have a standalone (not hosted) Blazor WebAssembly application open the index.html file and add this code within the <head> element:


<link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">

Include Radzen.Blazor.js

.NET 8

Open the App.razor file of your application. Add this code after the last <script>:


<script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
.NET 7
Open the Pages\_Host.cshtml file of your application. Add this code after the last <script>:


<script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
.NET 6
Open the Pages\_Layout.cshtml file of your application. Add this code after the last <script>:


<script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
WebAssembly (standalone)
If you have a standalone (not hosted) Blazor WebAssembly application open the index.html file and add this this code after the last <script>:


<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>

Use a component

To use a component type its tag name in your Blazor page:


<RadzenButton Text="Hi" Click=@OnClick />
@code {
  void OnClick()
  {
     // Handle the click event
  }
}

Dialog, context menu, tooltip, chart tooltip and notification

To use RadzenDialog, RadzenContextMenu, RadzenTooltip, RadzenChartTooltip and RadzenNotification you need to perform a few additional steps.

  1. Open MainLayout.razor and add this code
    .NET 8 
    
<RadzenComponents @rendermode=InteractiveAuto />
    Use a render mode which you have enabled for your application. RadzenDialog, RadzenContextMenu, RadzenTooltip and RadzenNotification require interactivity and will not work in static render mode (SSR).
    .NET 7 & .NET 6 
    
<RadzenComponents />
  2. Open Program.cs and add this code before builder.Build(): 
    
builder.Services.AddRadzenComponents();