Blazorアプリで、Boxデザインのコンポーネントを配置する

Blazorで、フレキシブルに使えるBoxデザインのコンポーネントを作ってみたいと思います。

こんな感じです。

ベースのBoxデザイン

こちら様のデザインを参考に、ベースとなるBoxデザインのコンポーネントを作成します。

ぽんひろ com アイコン吹き出し付きボックスをHTMLとCSSで作る！レスポンシブ対応！

共通のCSSをsite.cssにコピペ

参考サイト内に記載されている、共通のCSSを、Blazorアプリプロジェクトのwwwroot/css/site.cssに追記します。

blueの定義を追加

複数の色を指定できるように、site.cssに追加しておきます。今回は、BlueのCSS定義を追加しておきます。

BoxFormコンポーネントの作成

BoxForm.razorという名前で、Pagesフォルダにコンポーネントを作成します。
BoxForm内のhtmlは、参考サイト内の記述をほぼそのまま使います。

参考サイト.html

<div class="iconbox">
<div class="box-title">ここにタイトル</div>
<div class="iconbox-wrap">
<div class="box-content">
<ul class="list">
   <li>リスト1</li>
   <li>リスト2</li>
   <li>リスト3</li>
</ul>
</div>
<div class="iconballoon">
<div class="balloon">
吹き出し内容
</div>
<div class="icon">アイコン画像をここに挿入</div>
</div>
</div>
</div>

BoxFormは、Parameterを使って、タイトル、列挙される文字列、フォームの色を指定できるようにしてみます。また、RenderFragmentを使って、子コンテンツを指定できるようにしておきます。

BoxForm.razor

<div class="iconbox iconbox-@Color">
    <div class="box-title box-head-@Color">@Title</div>
    <div class="iconbox-wrap">
        <div class="box-content">
            @ChildContent
            <ul class="list">

                @foreach(var data in ListData)
                {
                    <li>@data</li>
                }
            </ul>
        </div>
    </div>
</div>

@code {
    /// <summary>
    /// 内包するコンテンツ
    /// </summary>
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    /// <summary>
    /// タイトル
    /// </summary>
    [Parameter]
    public string Title { get; set; } = "";

    /// <summary>
    /// 列挙する文字列
    /// </summary>
    [Parameter]
    public string[] ListData { get; set; } 

    /// <summary>
    /// 色
    /// </summary>
    [Parameter]
    public string Color { get; set; }  = "";
}

BoxFormコンポーネントを使用する

BoxFormコンポーネントの使い方はとても簡単です。<BoxForm>タグを指定してページに配置し、各パラメータに値を指定してあげます。

Index.razor

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

@*催し物*@
<BoxForm Title="催し物" ListData="@Events">
    <p>催し物のご案内です</p>
</BoxForm>

<hr />

@*今日のネタ*@
<BoxForm Title="今日のネタ" ListData="@Neta" Color="blue">
    <p>産地直送!ネタ切れ御免!</p>
</BoxForm>

@code{

    /// <summary>
    /// 催し物の列挙
    /// </summary>
    string[] Events = new[] { "9時 0歳からのBlazor教室", "13時 失敗しないBlazor", "15時 私はこうしてBlazorを習得しました" };


    /// <summary>
    /// 今日のネタの列挙
    /// </summary>
    string[] Neta = new[] { "銀鮭", "ほっけ", "ほたて","まぐろ","いか" };
}