初めまして、アキちゃんです。
備忘録をかねてブログを書くことにしました。
今回は2023/06 時点での最新環境で変わったことについて書きます。
それでは早速・・・2023/06 時点での最新環境で変わったこと！
Lesson.1 事の発端
久しぶりに新しい社内Webアプリをリリースしようと思ってRadzenについて調べたらいろいろ進化していました。
その中に過去の記事で行っていた面倒な手間が不要となっていたため、せっかくなんで記事にしようと思います。
Lesson.2 プロジェクト作成～Radzen導入まで
プロジェクト作成～Radzen導入までは、今までと特にかわりませんが、Nugetパッケージから取得するRadzenのバージョンのみ現在の最新(4.13.2)にしておきます。
基調のデザインについてもいろいろ追加されていました。
無料で使えるものの中で、個人的にhumanisticがおしゃれだったので
"Pages\_Layout.cshtml"の
<link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">を、
<link rel="stylesheet" href="_content/Radzen.Blazor/css/humanistic-base.css">に修正します。
Lesson.3 公式デザイン導入の簡略化
僕は過去に以下のような記事を書きましたが、その手間が一切なくなりました。
新しく追加されたLayoutコンポーネントを使用することで、メイン画面にてハンバーガーメニューをより簡単に実装することができるようになりました。
Shared/MainLayout.razorを、以下のように書き換えます。
MainLayout.razor（クリックで展開） MainLayout.razor（クリックで圧縮）
@inherits LayoutComponentBase
@using Radzen
@using Radzen.Blazor
@using System.Text.Json
@inject NavigationManager Navigation
<RadzenDialog />
<RadzenNotification />
<RadzenTooltip />
<RadzenContextMenu />
<RadzenLayout Style="grid-template-columns: auto 1fr auto; grid-template-areas: 'rz-header rz-header rz-header' 'rz-sidebar rz-body rz-right-sidebar'">
<RadzenHeader>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
<RadzenRow class="w-100">
<RadzenColumn Size="6">
<div class="d-flex align-items-center">
<RadzenSidebarToggle Click="@(() => sidebar5Expanded = !sidebar5Expanded)" />
<RadzenLabel Text="Radzen 4.13.2">
</RadzenLabel>
</div>
</RadzenColumn>
<RadzenColumn Size="6">
<div class="rz-text-align-right">
<RadzenSidebarToggle Click="@(() => sidebar6Expanded = !sidebar6Expanded)" />
</div>
</RadzenColumn>
</RadzenRow>
</RadzenStack>
</RadzenHeader>
<RadzenSidebar @bind-Expanded="@sidebar5Expanded">
<RadzenPanelMenu>
<RadzenPanelMenuItem Text="Home" Icon="home" Path="" />
<RadzenPanelMenuItem Text="Counter" Icon="count" Path="counter" />
<RadzenPanelMenuItem Text="Fetch" Icon="fetch" Path="fetchdata" />
</RadzenPanelMenu>
<div class="rz-p-4">
Left Sidebar
</div>
</RadzenSidebar>
<RadzenBody>
<ChildContent>
<RadzenContentContainer Name="main">
@Body
</RadzenContentContainer>
</ChildContent>
</RadzenBody>
<RadzenSidebar @bind-Expanded="@sidebar6Expanded" Style="width: 300px; grid-area: rz-right-sidebar">
<div class="rz-p-4">
Right Sidebar
</div>
</RadzenSidebar>
</RadzenLayout>
@code {
bool sidebar5Expanded = true;
bool sidebar6Expanded = true;
}
この状態で実行すると以下のような画面がでてきます。
Lesson.4 まとめ
以前までの記事のやり方ですると、IDEを一回入れてプロジェクトを作成し、ソースコードを引っ張て来てプロジェクトを作るたびに手を入れてあげなければいけなかったため手間でしたが、コーディングだけで実装できることがわかり、かなり楽になりました。
またコンポーネントについても、特にレイアウトにかかわる部分が追加・更新されていてcssで頑張っていたところも、コンポーネントが勝手に実装してくれるようになっていました。
以上！！
