Blazor 토스트 개요

Blazor Toast는 메시지 내용을 표시하고 최종 사용자에게 변경된 레코드의 상태를 알리는 데 사용되는 매우 가볍고 작은 팝업 구성 요소입니다. Blazor 토스트 알림을 화면 하단이나 다른 지정된 영역에 쉽게 배치하고 표시할 수 있습니다. 또는 간단하고 쉬운 방법으로 알림을 해제할 수도 있습니다.

Blazor Toast 구성 요소는 주로 시스템 메시징, 푸시 알림, 경고 메시지 및 정보에 사용됩니다. 사용자가 해제할 수 없습니다. 이 컨트롤에는 애니메이션 효과, 토스트 구성 요소가 표시되는 시간을 구성하는 표시 시간 속성, 스타일링 등과 같은 다양한 기능이 있습니다.

Blazor Toast Example

아래의 Ignite UI for Blazor를 살펴보세요. 버튼을 클릭하면 애니메이션 알림 메시지가 팝업됩니다.

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbButtonModule),
                typeof(IgbToastModule)
   );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbButton @onclick=@OnToastButtonClick Variant=@ButtonVariant.Contained>Show Toast</IgbButton>
    <IgbToast @ref="ToastRef">Toast Message</IgbToast>
</div>

@code {
    

    public IgbToast ToastRef { get; set; }

    public void OnToastButtonClick(MouseEventArgs args)
    {
        if(this.ToastRef != null)
        {
            this.ToastRef.Show();
        }
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

How To Use Ignite UI for Blazor Toast Notification

Blazor IgbToast 사용하려면 다음과 같이 등록해야 합니다.

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbToastModule));
razor

Ignite UI for Blazor에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

​IgbCalendar 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일이나 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
razor

<IgbButton @onclick=@OnToastButtonClick Variant=@ButtonVariant.Contained>Show Toast</IgbButton>
<IgbToast @ref="ToastRef">Toast Message</IgbToast>

@code {
    public IgbToast ToastRef { get; set; }

    protected override void OnInitialized()
    {
    }

    public void OnToastButtonClick(MouseEventArgs args)
    {
        if (this.ToastRef != null)
        {
            this.ToastRef.Show();
        }
    }
}
razor

最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。

無料で試してみる

Examples

Properties

​DisplayTime 속성을 사용하여 토스트 구성 요소가 표시되는 기간을 구성합니다. 기본적으로 4000밀리초로 설정되어 있습니다.

기본적으로 토스트 구성 요소는 DisplayTime에 지정된 기간이 지나면 자동으로 숨겨집니다. KeepOpen 속성을 사용하여 이 동작을 변경할 수 있습니다. 이런 식으로 토스트가 계속 보입니다.

<IgbButton @onclick=@OnToggleToastButtonClick Variant="ButtonVariant.Contained">Toggle Toast</IgbButton>
<IgbButton @onclick=@OnToggleKeepOpenButtonClick Variant="ButtonVariant.Contained">Toggle KeepOpen Property</IgbButton>
<IgbButton @onclick=@OnDisplayTimeButtonClick Variant="ButtonVariant.Contained">Set DisplayTime to 8000</IgbButton>

<IgbToast @ref=ToastRef>Toast Message</IgbToast>

@code {
    public IgbToast ToastRef{  get;  set; }

    protected override void OnInitialized()
    {
    }

    public void OnToggleToastButtonClick(MouseEventArgs args)
    {
        if (this.ToastRef != null)
        {
            this.ToastRef.Toggle();
        }
    }

    public void OnToggleKeepOpenButtonClick(MouseEventArgs args)
    {
        if (this.ToastRef != null)
        {
            this.ToastRef.KeepOpen = !this.ToastRef.KeepOpen;
        }
    }

    public void OnDisplayTimeButtonClick(MouseEventArgs args)
    {
        if (this.ToastRef != null)
        {
            this.ToastRef.DisplayTime = 8000;
        }
    }
}
razor

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbButtonModule),
                typeof(IgbToastModule)
   );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <style>
        .buttonContainer {
            display: flex;
            justify-content: space-evenly;
            margin-top: 20px;
        }
    </style>

    <div class="buttonContainer">
        <IgbButton @onclick=@OnToggleToastButtonClick Variant="ButtonVariant.Contained">Toggle Toast</IgbButton>
        <IgbButton @onclick=@OnToggleKeepOpenButtonClick Variant="ButtonVariant.Contained">Toggle KeepOpen Property</IgbButton>
        <IgbButton @onclick=@OnDisplayTimeButtonClick Variant="ButtonVariant.Contained">Set DisplayTime to 8000</IgbButton>
    </div>

    <IgbToast @ref=ToastRef>Toast Message</IgbToast>

</div>

@code {
    

    public IgbToast ToastRef { get; set; }

    public void OnToggleToastButtonClick(MouseEventArgs args)
    {
        if(this.ToastRef != null)
        {
            this.ToastRef.Toggle();
        }
    }

    public void OnToggleKeepOpenButtonClick(MouseEventArgs args)
    {
        if(this.ToastRef != null)
        {
            this.ToastRef.KeepOpen = !this.ToastRef.KeepOpen;
        }
    }

    public void OnDisplayTimeButtonClick(MouseEventArgs args)
    {
        if(this.ToastRef != null)
        {
            this.ToastRef.DisplayTime = 8000;
        }
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

Styling

태그 선택기를 사용하여 Blazor IgbToast 알림의 스타일을 직접 지정할 수 있습니다.

igc-toast {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}
css

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbButtonModule),
                typeof(IgbToastModule)
  );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">

    <style>
        igc-toast {
            background: #011627;
            color: #ECAA53;
            outline-color: #ECAA53;
        }
    </style>

    <IgbButton @onclick=@OnToastButtonClick Variant="ButtonVariant.Contained">Show Styled Toast</IgbButton>
    <IgbToast @ref=ToastRef>Styled Toast</IgbToast>
</div>

@code {
    

    public IgbToast ToastRef { get; set; }

    public void OnToastButtonClick(MouseEventArgs args)
    {
        if(this.ToastRef != null)
        {
            this.ToastRef.Show();
        }
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

API References

• IgbCalendar
• DisplayTime
• KeepOpen
• Show
• IgbToast
• Styling & Themes

Additional Resources

• Ignite UI for Blazor 포럼
• Ignite UI for Blazor 깃허브