[Blazor] 컴포넌트 소개 및 활용

Blazor에 대해 설명한 글 : (아직 MD 형식으로 깃허브에만 정리해서 추후 블로그 글로 올릴 예정)

 

Button

BootStrap의 Button 컴포넌트로 사용 가능하다.

<button type="button" class="btn btn-primary btn-lg">Large button</button>

class에 사용할 버튼의 디자인을 지정할 수 있고 @onclick 속성으로 버튼 클릭 시 이루어질 행동을 함수로 지정할 수 있다

아래 공식 문서를 참고해서 디자인을 설정할 수 있다

https://getbootstrap.com/docs/5.3/components/buttons/

Buttons

 

 

 

Message

✨ 이때! 처음 Ant Design의 pop-up 기능을 사용한다면, 아래 설정을 먼저 따라하자! ✨ (아래 이어진다)

Ant Design의 Message 컴포넌트를 활용해 메세지 박스를 띄울 수 있다.

@inject IMessageService _message

<Button Type="default" OnClick="OnClick">
    Customized display duration
</Button>

@code{
    private void OnClick()
    {
        _message.Success("This is a prompt message for success, and it will disappear in 10 seconds", 10);
    }
}

 

아래 공식 문서에 여러 메세지 박스들과 구체적인 사용 방법이 나와있다. (웹에서 테스트도 바로 가능하다)

https://antblazor.com/en-US/components/message

Ant Design Blazor

 

✨ 이때! 처음 Ant Design의 pop-up 기능을 사용한다면, 아래 설정을 따라하자! ✨

To display the pop-up component dynamically, you need to add the <AntContainer /> component in App.razor.

• For Blazor WebApp, you also need to specify render mode to <Routes /> for interactivity.

<Routes @rendermode="RenderMode.InteractiveAuto" />            <-- specify the rendermode ✨
+ <AntContainer @rendermode="RenderMode.InteractiveAuto" />    <-- add this component ✨

• For legacy blazor apps just add a line of code:

<Router AppAssembly="@typeof(MainLayout).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <Result Status="404" />
        </LayoutView>
    </NotFound>
</Router>

<AntContainer />   <-- add this component ✨

[역시 공식 문서가 최고다]

Ant Design Blazor

 

이렇게 App.razor 까지 수정 완료하면, 문제 없이 팝업이 작동하는 것을 알 수 있다!