今度は Ant Design Blazor というものを試してみようと思います。
プロジェクト作成と初期セットアップ
Getting Started に従って導入してみようと思います。
プロジェクトを作ったら AntDesign というパッケージを NuGet から追加して、Program.cs に builder.Services.AddAntDesign(); という行を追加します。そして _Layout.cshtml に以下のコードを追加して js/css を追加します。
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>
_Imports.razor に以下の1行を追加して AntDesign の名前空間が自動的に using されるようにします。
@using AntDesign
最後に App.razor の末尾に AntContainer コンポーネントを追加します。ダイアログとかを出すために必要みたいです。
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
<AntContainer />
使ってみよう
下準備が出来たので、以下のページのコンポーネントのカタログを見ながら適当に触ってみようと思います。
Button コンポーネントで適当にボタンを作って Modal コンポーネントでポップアップ的なものを表示してみようと思います。とりあえず以下のような感じで5秒間表示するようにしてみました。
@page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
<Button OnClick="OnClick">Hello</Button>
<Modal Visible="@_isModalVisible" Closable="false" Footer="null">
<p>Hello!!!Hello!!!Hello!!!</p>
</Modal>
@code {
private bool _isModalVisible = false;
private async Task OnClick(MouseEventArgs e)
{
_isModalVisible = true;
await Task.Delay(5000);
_isModalVisible = false;
}
}
実行してみると以下のような感じで動きます。思った通りに動いて気持ちいですね。
レイアウト
AntDesign は画面全体のレイアウトを定義できる Layout コンポーネントも用意してくれています。
良さそう。
試しに MainLayout.razor を以下のように書き換えて…
@inherits LayoutComponentBase
@inject NavigationManager _navigationManager
<PageTitle>AntDesignBlazorTest</PageTitle>
<Layout Style="width: 100%; height: 100%;">
<Header>
<Title Level="2" Style="float: left; color: white; margin: 10px 50px 10px 0px;">AntDesignBlazorTest</Title>
<Menu Theme="MenuTheme.Dark" Mode="MenuMode.Horizontal" DefaultSelectedKeys="SelectedPage" OnMenuItemClicked="OnMenuSelected">
<MenuItem Key="/">Home</MenuItem>
<MenuItem Key="/counter">Counter</MenuItem>
<MenuItem Key="/fetchdata">FetchData</MenuItem>
</Menu>
</Header>
<Layout>
<Content Style="padding: 0px 50px">
@Body
</Content>
</Layout>
<Footer>
<p>まい さんぷる あぷり</p>
</Footer>
</Layout>
@code {
private string[] SelectedPage { get; set; } = new[] { "/" };
private void OnMenuSelected(MenuItem menuItem)
{
_navigationManager.NavigateTo(menuItem.Key);
SelectedPage = new[] { menuItem.Key };
}
}
そして site.css に以下の定義を追加して html, body が画面いっぱいになるようにします。
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
width: 100%;
height: 100%;
}
そして bootstrap も邪魔になりそうなので _Layout.cshtml から削除します。
@using Microsoft.AspNetCore.Components.Web
@namespace AntDesignBlazorTest.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
@* <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /> *@
<link href="css/site.css" rel="stylesheet" />
<link href="AntDesignBlazorTest.styles.css" rel="stylesheet" />
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
@RenderBody()
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>
</body>
</html>
実行すると以下のようになります。割といい感じ。
よさそうですね。
まとめ
軽く触った感じ、ちゃんと動いてる感があって好感が持てました。
他にもいろいろなコンポーネントがあるのでおいおい試してみてもいいかも。
Discussion