[Blazor] BlazorComponentUtilities 의 CssBuilder, StyleBuilder 사용하기

BlazorComponentUtilities 의 CssBuilder, StyleBuilder 사용하면 내가 원하는 스타일을 코드로 지정할 수 있습니다.

1. BlazorComponentUtilities Nuget package 설치

_Imports.razor 에 @using BlazorComponentUtilities 추가합니다.

2. 간단한 Style 적용 예시

@page "/"

<PageTitle>Index</PageTitle>

<button style="@testButtonStyle" onclick="@Onclick">
    test
    </button>

@code
{
    private bool isTest {get;set;} = false;

    private string testButtonStyle => new StyleBuilder()
                                    .AddStyle("width", "100%", isTest)
                                    .AddStyle("color", "red", isTest)
                                    .Build();

    private void Onclick(MouseEventArgs e)
    {
        isTest = !isTest;
    }
}

위처럼 StyleBuilder 를 통해 어떤 조건에 부합되는 경우 style 을 적용할 수 있습니다.

isTest 가 true 인 경우 width:100% 가 적용되며

isTest 가 false 인 경우 color:red 가 적용됩니다.

[결과 화면]

3. Component 를 이용한 적용 예시

ButtonStyle.cs

namespace Blazor.ComponentUtiitiesTest.Shared
{
    public enum ButtonStyle
    {
        Primary, Secondary, Outlined
    }
}

TestButton.razor

<button class="@buttonClass" style="@buttonStyle @Style" disabled="@IsDisabled" @onclick="OnClick">
    @Text 
</button>

@code {

    /// <summary>
    /// 적용할 Style
    /// </summary>
    [Parameter]
    public ButtonStyle ButtonStyle { get; set; } = ButtonStyle.Primary;

    /// <summary>
    /// 버튼에 표시될 Text
    /// </summary>
    [Parameter]
    public string? Text { get; set; }

    /// <summary>
    /// 너비 100% 로 할것인지 여부
    /// </summary>
    [Parameter]
    public bool IsFullWidth { get; set; }

    /// <summary>
    /// Disable 여부
    /// </summary>
    [Parameter]
    public bool IsDisabled { get; set; }

    /// <summary>
    /// 클릭 이벤트
    /// </summary>
    [Parameter]
    public EventCallback<MouseEventArgs> OnClick { get; set; }

    /// <summary>
    /// Class
    /// </summary>
    [Parameter]
    public string? Class { get; set; }

    /// <summary>
    /// Style
    /// </summary>
    [Parameter]
    public string? Style { get; set; }

    private string buttonClass => new CssBuilder()
                                .AddClass("button")
                                .AddClass("primary", ButtonStyle == ButtonStyle.Primary) // ButtonStyle 이 Primary 인 경우 primary 적용
                                .AddClass("secondary", ButtonStyle == ButtonStyle.Secondary) // ButtonStyle 이 Secondary 인 경우 secondary 적용
                                .AddClass("outlined", ButtonStyle == ButtonStyle.Outlined) // ButtonStyle 이 Outlined 인 경우 outlined 적용
                                .AddClass("disabled", IsDisabled)
                                .AddClass("Class", !string.IsNullOrWhiteSpace(Class))
                                .Build();

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

TestButton.razor.css

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

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

.primary {
    background-color: #302D83;
    color: white;
}

.secondary {
    background-color: #7362D8;
    color: lightgray;
}

.outlined {
    background-color: transparent;
    color: black;
    border: 1px solid black;
}

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

Index.razor

@page "/"

<PageTitle>Index</PageTitle>
<TestButton Text="First Button" ButtonStyle="ButtonStyle.Primary" />
<TestButton Text="Secondary Button" ButtonStyle="ButtonStyle.Secondary" />
<TestButton Text="Outlined Button" ButtonStyle="ButtonStyle.Outlined" OnClick="Onclick" />
<TestButton Text="Disabled FullWidth Button"
            Style="border: 3px solid blue;" Class="mt-4" IsDisabled="true" IsFullWidth="true" />

<button style="@testButtonStyle" onclick="@Onclick">
    test
</button>

@code
{
    private bool isTest {get;set;} = false;

    private string testButtonStyle => new StyleBuilder()
                                    .AddStyle("width", "100%", isTest)
                                    .AddStyle("color", "red", !isTest)
                                    .Build();

    private void Onclick(MouseEventArgs e)
    {
        isTest = !isTest;
    }
}

위 코드를 보면 알수 있듯이 CssBuilder 를 이용하여 css 에 정의된 내용을 선택하여 적용할 수 있으며 사용자가 정의한 Style 도 적용가능합니다.

실행결과

[Source]

https://github.com/kei-soft/Blazor.AppTest/tree/master/Blazor.ComponentUtiitiesTest