Codeer.LowCode.BlazorにRadzen Blazorコンポーネントを追加するためのライブラリです。
LowCodeApp.Client.Shared プロジェクトにNuGetから次のパッケージをインストールしてください。
- Codeer.LowCode.Bindings.Radzen.Blazor
ライブラリの使用に必要なコードを以下のプロジェクトにそれぞれ追加する必要があります。
- LowCodeApp.Client
- LowCodeApp.Shared
- LowCodeApp.Designer
Program.cs に以下のコードを追加してください。
RadzenLoader.LoadAssemblies();
builder.Services.AddRadzenComponents();MainLayout.razor に以下のコードを追加してください。
@using Codeer.LowCode.Bindings.Radzen.Blazor.Installer
<RadzenInstaller />Program.cs に以下のコードを追加してください。
RadzenLoader.LoadAssemblies();App.xaml.cs に以下のコードを追加してください。
RadzenLoader.LoadAssemblies();
Services.AddRadzenComponents();
BlazorRuntime.InstallAssemblyInitializer(typeof(MudBlazorInstaller).Assembly);
BlazorRuntime.InstallRenderProvider(typeof(RadzenInstaller));DesignerからMudBlazor UIを使用したコンポーネントが配置できるようになっています。 通常のButtonやBooleanの代わりにRadzenButtonやRadzenBooleanを使用してください。
// 画像
Codeer.LowCode.Blazorの標準コントロールに対応するMudBlazorコントロールは以下の通りです。
| Codeer.LowCode.Blazor | Radzen Blazor |
|---|---|
| Boolean | RadzenBoolean |
| Button | RadzenButton |
| Date | RadzenDate |
| DateTime | RadzenDateTime |
| Id | RadzenId |
| Link | RadzenLink |
| Number | RadzenNumber |
| Password | RadzenPassword |
| RadioButton | RadzenRadioButton |
| RadioGroup | RadzenRadioGroup |
| Select | RadzenSelect |
| Text | RadzenText |
| Time | RadzenTime |
このライブラリでは次の2個のカスタムコントロールが提供されています。
- RadzenChart
データをグラフで表示するためのコントロールです。
Radzen Blazor が必要としているJS/CSSは自動的に構成されるようになっていますが自動構成を無効にし手動構成にすることができます。
自動的な構成を無効にする場合は、index.html などのBlazorが読み込まれるページの<head>に<meta>を追加してください。
<head>
<meta name="Codeer.LowCode.Radzen.Blazor::autoload" content="false">
</head>これにより自動構成が無効になるため、JS/CSSを明示的に読み込む必要があります。
Radzen Blazorのドキュメントに沿ってindex.html を編集してください。
特定のRazorページが表示されている間のみRadzen Blazor関連のCSSをロードさせることができます。 Radzen Blazor関連のCSSを読み込みたいRazorファイル内で次のBlazorコンポーネントを追加してください。
@using Codeer.LowCode.Blazor.Components.Primitives
<StyleLoader Href="_content/Radzen.Blazor/css/material-base.css" />