728x90
728x170

Blazored.Toast 패키지를 이용해여 Toast Message 표시하는 방법입니다.

0. Blazor  WebAssembly 앱 프로젝트를 생성합니다.

1. Blazored.Toast Nuget Package를 설치합니다.


2. Program.cs 에 코드 추가합니다.
using Blazor.ToastTest;
builder.Services.AddBlazoredToast();

using Blazor.ToastTest;

using Blazored.Toast;

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddBlazoredToast();

await builder.Build().RunAsync();


3. _Imports.razor 에 미리 using 처리합니다.

@using Blazored.Toast
@using Blazored.Toast.Services


4. MainLayout.razor 에 코드 추가합니다. (BlazoredToasts)

@inherits LayoutComponentBase
@using Blazored.Toast.Configuration

<BlazoredToasts Position="ToastPosition.BottomRight"
                Timeout="5"
                IconType="IconType.FontAwesome"
                ShowProgressBar="true"
                SuccessClass="success-toast-override"
                ErrorIcon="fa fa-bug"
                SuccessIcon="fa fa-thumbs-up" />

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>


5. wwwroot 의 index.html 파일에 link를 추가합니다.
<link href="_content/Blazored.Toast/blazored-toast.css" rel="stylesheet" />

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Blazor.ToastTest</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="Blazor.ToastTest.styles.css" rel="stylesheet" />
    <link href="_content/Blazored.Toast/blazored-toast.css" rel="stylesheet" />
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>


6. 화면에서 Toast 표시를 위해 아래 처럼 사용합니다.
Index.razor

@page "/"

@using Blazored.Toast

@inject IToastService toastService

<h1>Toast Demo</h1>

To show a toast just click one of the buttons below.<br />

<button class="btn btn-info" @onclick="@(() => toastService.ShowInfo("I'm an INFO message"))">Info Toast</button>
<button class="btn btn-success" @onclick="@(() => toastService.ShowSuccess("I'm a SUCCESS message with a custom title", "Congratulations!"))">Success Toast</button>
<button class="btn btn-warning" @onclick="@(() => toastService.ShowWarning("I'm a WARNING message"))">Warning Toast</button>
<button class="btn btn-danger" @onclick="ShowError">Error Toast</button>

@code{
    private void ShowError()
    {
        toastService.ShowError("I'm an ERROR message");
    }
}

결과 (아래 막대바 흐르는게 끝나면 Toast Message 창이 닫힙니다.)

Toast Message 표시에 대한 설정은 
MainLayout.razor 에 추가된 아래 코드 내용을 변경하여 처리할 수 있습니다.

<BlazoredToasts Position="ToastPosition.BottomRight"
                Timeout="5"
                IconType="IconType.FontAwesome"
                ShowProgressBar="true"
                SuccessClass="success-toast-override"
                ErrorIcon="fa fa-bug"
                SuccessIcon="fa fa-thumbs-up" />

[Source]
https://github.com/kei-soft/Blazor.AppTest/tree/master/Blazor.ToastTest

 

GitHub - kei-soft/Blazor.AppTest

Contribute to kei-soft/Blazor.AppTest development by creating an account on GitHub.

github.com

 

728x90
그리드형
Posted by kjun
,