[Blazor] 원형 버튼 만들기

개요

• Blazor 원형 버튼 만드는 방법에 대해서 정리 진행합니다.

원형 버튼 만든 이유

• 현재 TodoList 를 만들면서, Blazor 개념을 익히고 있습니다.
• 여기서 단순 버튼보다, 보다 새로운 버튼을 만들고자 원형 버튼으로 변경하고 싶어서 만들어 보게 되었습니다.

원형 버튼 컴포넌트

• 재사용을 위해서 원형 버튼 컴포넌트를 따로 만들어 주었습니다.
• CircleButtonComponent.razor 라는 컴포넌트 프로젝트 하나 생성해 주었고 다음과 같이 코드를 작성 진행하였습니다.

<div class="btn-container">
    <button class="@(IsClicked == true ? "circle-add-button" : "circle-not-add-button")"
            type="button"
            @onclick="(() => CircleChange.InvokeAsync())">
        @ButtonContent
    </button>
</div>

@code {
    [Parameter]
    public bool IsClicked { get; set; }
    [Parameter]
    public string? ButtonContent { get; set; }
    [Parameter]
    public EventCallback CircleChange { get; set; }
}

• HTML 영역에서 크게 div 태그안에 button 컨트롤을 자식으로 두었습니다.
• 그리고 class 속성에는 2개의 속성인 circle-add-button, circle-not-add-button CSS 속성이 있습니다.
• 해당 CSS 속성에서 button 컨트롤의 모형을 원형으로 바꿔주는 코드가 있습니다.

• CircleButtonComponent.razor.css 스타일시트 프로젝트를 하나 만들어 주고 다음과 같이 속성 값들을 정의해 주었습니다.

.btn-container {
    display: flex;
    justify-content: center;
}

.circle-add-button {
    display: block;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    border: none;
    background: #38d9a9;
    font-size: 100px;
    line-height: 80px;
    color: white;
    text-align: center;
}

.circle-add-button:hover {
    background: #63e6be;
}

.circle-not-add-button {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    border: none;
    background: #ff8787;
    font-size: 75px;
    color: white;
    line-height: 1px;
}

부모 컴포넌트에서 원형 버튼 컴포넌트 선언

• 앞서 만든 자식 컴포넌트를 부모 컴포넌트에 선언해 주고, 정상적으로 원형 버튼이 나오는지 확인합니다.

...생략

<CircleButtonComponent
        IsClicked="@IsClicked"
        ButtonContent="@ButtonContent"
        CircleChange="CircleChange">
</CircleButtonComponent>

...생략

실행 결과

• 실행 결과 , 정상적으로 원형 버튼 컴포넌트가 생성된 것을 확인할 수 있습니다.