Blazor에서, 유연하게 사용할 수 있는 Box 디자인의 컴퍼넌트를 만들어 보고 싶습니다.

이런 느낌입니다.

기본 Box 디자인

이쪽의 디자인을 참고로, 베이스가 되는 Box 디자인의 컴퍼넌트를 작성합니다.

Pon Hiro com 아이콘 연설 거품이있는 상자를 HTML과 CSS로 만듭니다! 반응형 대응!

공통 CSS를 site.css로 복사

참고 사이트에 나열된 공통 CSS를 Blazor 앱 프로젝트의 wwwroot/css/site.css에 추가합니다.

블루 정의 추가

여러 색상을 지정할 수 있도록 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[] { "銀鮭", "ほっけ", "ほたて","まぐろ","いか" };
}