[Blazor] 모범사례 5 - CssBuilder 및 StyleBuilder를 사용하여 클래스 및 스타일 조작

• Blazor 다섯 번째 모범사례는 CssBuilder 및 StyleBuilder를 사용하여 클래스 및 스타일 조작 사용방법 입니다.
• 보통 CSS 혹은 Style 을 사용하려면, CSS 파일 안에 Style 속성을 지정하여 태그나 속성 값을 매칭해 스타일을 적용하는 방식으로 사용합니다.
• 하지만, Blazor 에서는 CssBuilder, StyleBuilder 를 이용하여 스타일을 적용할 수 있습니다.

5.1 BlazorComponentUtilities NuGet 설치

• CssBuilder, StyleBuilder 를 사용하기 위해서는 BlazorComponentUtilities NuGet Package 를 설치하면 됩니다.
• 때문에 BlazorComponentUtilities NuGet Package 를 설치 진행합니다.

5.2 AKButton.razor

• 테스트를 진행하기 위해서, AKButton.razor 컴포넌트를 만들었습니다.
• 그리고 다음 HTML 코드들을 추가해 주었습니다.

@namespace AKLab01.Blaozr.Components

<button class="@_buttonClasses" style="@_buttonStyle @Style" @attributes="UserAttributes" disabled="@IsDisabled">
    @Text 
</button>

• 위에서 속성 값들은 뒤에서 AKButton.razor.cs 파일에 추가할 예정입니다.
• 여기서 핵심은 class="@_buttonClasses" style="@_buttonStyle @Style" 부분입니다.
• 그 전에는, 여기에 다이렉트로 CSS 속성의 이름을 주었지만, BlazorComponentUtilities NuGet 을 설치 후, Builder 패턴으로 CSS 값들을 동적으로 줄 수 있습니다.

5.3 AKButton.razor.cs

• 그럼 CssBuilder, StyleBuilder 를 어떻게 선언하고 사용하는지 코드를 통해 보겠습니다.

using BlazorComponentUtilities;
using Microsoft.AspNetCore.Components;

namespace AKLab01.Blaozr.Components;

public partial class AKButton
{
    [Parameter]
    public ButtonStyle ButtonStyle { get; set; } = ButtonStyle.Primary;

    [Parameter]
    public string? Text { get; set; }

    [Parameter]
    public bool IsFullWidth { get; set; }

    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> UserAttributes { get; set; } = new Dictionary<string, object>();

    [Parameter]
    public EventCallback OnClick { get; set; }

    [Parameter]
    public string? Class { get; set; }
    [Parameter]
    public string? Style { get; set; }

    [Parameter]
    public bool IsDisabled { get; set; }

    private string _buttonClasses => new CssBuilder()
                                            .AddClass("button")
                                            .AddClass("primary", ButtonStyle == ButtonStyle.Primary)
                                            .AddClass("secondary", ButtonStyle == ButtonStyle.Secondary)
                                            .AddClass("outlined", ButtonStyle == ButtonStyle.Outlined)
                                            .AddClass("disabled", IsDisabled)
                                            .AddClass("Class", !string.IsNullOrWhiteSpace(Class))
                                            .Build();

    private string _buttonStyle => new StyleBuilder()
                                        .AddStyle("width", "100%", IsFullWidth)
                                        .Build();
}

public enum ButtonStyle
{
    Primary, Secondary, Outlined
}

• 위처럼 C# 코드 영역에서 CssBuilder, StyleBuilder 를 이용하여 CSS 속성들을 미리 선언해주어서, 부모에서 들어온 값에 따라서 CSS 가 선택되어 사용되도록 할 수 있습니다.

5.4 AKButton.razor.css

• 다음은 AKButton.razor.css CSS 내용입니다.
• 앞서, CssBuilder 에서 정의된 CSS 내용들이 있는 부분입니다.

.button  {
    border: none;
    padding: 10px 40px;
    font-size: 20px;
    transition: 0.3s;
    border-radius: 3px;
    cursor: pointer;
}

.button:hover:enabled {
    background-color: #CCCCCC;
}

.primary {
    background-color: blue;
    color: white;
}

.secondary {
    background-color: white;
    color:blue;
}

.outlined {
    background-color: transparent;
    border: 2px solid blue;
    color: blue;
}

.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

5.5 부모 페이지에서 AKButton 컴포넌트 사용하기

• 그럼 실제로 만든 AKButton 컴포넌트를 부모 페이지에 선언하여 사용해보도록 하겠습니다.

@page "/"
@using AKLab01.Blaozr.Components


<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

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

<AKButton Text="First Primary Button"/>
<AKButton Text="Secondary Primary Button" ButtonStyle="ButtonStyle.Secondary"/>
<AKButton Text="Outlined Primary Button" ButtonStyle="ButtonStyle.Outlined"/>
<AKButton Text="First Primary Button" IsDisabled="true" Class="mt-4" Style="border: 3px solid orange;" IsFullWidth="true"/>

• 위처럼 ButtonStyle 속성 값에 따라서 CSS 값이 자동으로 적용되어 표시되는 것을 확인할 수 있습니다.