[Blazor] Blazored.Toast 사용하여 Toast Message 표시하기
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