radzen-blazor/getting-started.md at 8.7.3

mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00

Files

Maxim Becker 13326879f0 Render chart tooltips in the same way as standard tooltips (#1745 )

* Render chart tooltips in the same way as standard tooltips

* Move OpenChartTooltip method to TooltipService to avoid code duplications

* Avoid partially hiding of chart tooltip near top of page

* Make some of the types internal.

---------

Co-authored-by: Atanas Korchev <akorchev@gmail.com>

2024-10-28 10:01:13 +02:00

8.2 KiB

Raw Permalink Blame History

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.

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 />
```
Open Program.cs and add this code before builder.Build():
```
builder.Services.AddRadzenComponents();
```

8.2 KiB Raw Permalink Blame History