今度は 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 コンポーネントを追加します。ダイアログとかを出すために必要みたいです。

App.razor

<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秒間表示するようにしてみました。

Index.razor

@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 を以下のように書き換えて…

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 が画面いっぱいになるようにします。

site.css

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    width: 100%;
    height: 100%;
}

そして bootstrap も邪魔になりそうなので _Layout.cshtml から削除します。

_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